如何在 AJAX 加载的选项卡中初始化 jquery 函数

How do I initialize a jquery function in an AJAX loaded tab?

本文关键字：初始化 jquery 函数 选项 AJAX 加载      更新时间：2023-09-26

我的 AJAX 加载选项卡工作正常，这是代码：

<div id="tabs">
  <ul>
    <li><a href="../about-leadership-admin-ajax/">Leadership / Admin</a></li>
    <li><a href="../about-sales-marketing-ajax/">Sales & Marketing</a></li>
    <li><a href="../about-service-desk-technicians-ajax/">Service Desk Technicians</a></li>
    <li><a href="../about-technology-consultants-ajax/">Technology Consultants</a></li>
    <li><a href="../about-manufacturing-consultants-ajax/">Manufacturing Consultants</a></li>
    <li><a href="../about-salesforce-cpm-consultants-ajax/">Salesforce/CPM Consultants</a></li>
    <li><a href="../about-developers-ajax/">Developers</a></li>
  </ul>
</div>

和我的启动脚本：

<script>
  jQuery(function() {
    jQuery( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    jQuery( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
    jQuery( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible." );
        });
      }
    });
  });
</script>

我在每个选项卡上都有一个jQuery滑块。只有第一个（在加载的第一个选项卡中）正常工作，直到我导航到一个新选项卡。当我回到第一个选项卡时，滑块都搞砸了。我需要在每个 AJAX 加载选项卡上使用的初始化脚本是：

<script>
jQuery(document).ready(function(){
jQuery('#horiz_container_outer').horizontalScroll();
});
</script>

我知道（文档）.ready不起作用。我需要知道在我的选项卡初始化脚本中放置什么以及放置什么才能完成这项工作。

我知道我需要在jQuery中使用几个函数之一，但我不知道该使用什么以及在哪里使用。我的选项看起来像.load（），.bind（），.success（）。

如果有人能指出我正确的方向并具体一点，我会很高兴。提前谢谢。我也愿意为解决方案付费：）

尝试使用激活事件

jQuery( "#tabs" ).tabs({
  beforeLoad: function( event, ui ) {
    ui.jqXHR.error(function() {
      ui.panel.html(
        "Couldn't load this tab. We'll try to fix this as soon as possible." );
    });
  }
  activate: function( event, ui ) {
    jQuery('#horiz_container_outer').horizontalScroll();
  }
});
相关文章：