Question

下面是jQuery的示例，说明如何在选项卡面板中获取链接以在该面板中加载。

$(function(){
   $('#example').tabs({
      load: function(event, ui) {
          $('a', ui.panel).click(function() {
              $(ui.panel).load(this.href);
              return false;
          });
      }
   });
});

但是，行$(ui.panel).load(this.href);不会触发标签加载事件，因此在您加载一个链接后其余部分正常

我问的原因是因为我的标签内有一个嵌套的手风琴，我想通过服务器端分页对它进行分页，但是当我使用页面链接时，它不会重新制作手风琴。

我想要这样的东西

$(function(){
   $('#example').tabs({
      load: function(event, ui) {
          $(".products", ui.panel).accordion();
          $(".product_link", ui.panel).colorbox();

          $('a', ui.panel).click(function() {
              $(ui.panel).load(this.href);
              return false;
          });
      }
   });
});

这似乎让我几乎到了那里，但是$(ui.panel).load(this.href)只会将它加载到第一个面板中，无论我在哪个标签上

$(function(){
   $('#example').tabs({
      load: function(event, ui) {
          $(".products", ui.panel).accordion();
          $(".product_link", ui.panel).colorbox();

          $('a', ui.panel).live('click',function() {
              $(ui.panel).load(this.href,function(){
                           $(".products").accordion();
                           $(".product_link").colorbox();
                        });
              return false;
          });
      }
   });
})

任何想法？

Answer 1

试试这个：

$(function(){
   $('#example').tabs({
      load: function(event, ui) {
          $('a', ui.panel).live("click", function() {
              $(ui.panel).load(this.href);
              return false;
          });
      }
   });
});

如果我找到了你，那么在使用$.load刷新内容之后，你绑定点击处理程序的链接将不再按照他们的意愿行事。那是因为您正在通过ajax调用替换所有这些链接，因此在您单击一个之后，所有这些链接都会被替换，并且不再具有click事件处理程序绑定。

jQuery.live通过自动将事件处理程序重新附加到与您的选择器匹配的新注入元素，防止它们丢失绑定事件处理程序。参见：

http://docs.jquery.com/Events/live

编辑：尝试在$.load的回调中重新附加手风琴：

$(function(){
   $('#example').tabs({
      load: function(event, ui) {
          $(".products", ui.panel).accordion();
          $(".product_link", ui.panel).colorbox();

          $('a', ui.panel).live("click", function() {
              $(ui.panel).load(this.href, function() {
                  $(".products", ui.panel).accordion();
                  $(".product_link", ui.panel).colorbox();
              });
              return false;
          });
      }
   });
});

Answer 2

尝试在load事件中使用ui.tab.hash或选择事件

jquery选项卡加载事件

2 个答案: