jquery标签加载事件

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

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