jQuery 选项卡 - 为什么请求成倍增加？

Question

假设我有一个 jQuery UI 选项卡（已加载 ajax），定义为调用页面 abc.html。在该页面上，我调用另一个页面，比方说 def.html。在我的 jQuery 选项卡定义中，我定义了选项卡内的链接应在选项卡内打开，这就是定义：

$(document).ready(function() {
    $("#tabs").tabs({
        select: function(event, ui) {
            $(ui.panel).undelegate('a', 'click');
        },
        load: function(event, ui) {
            $(ui.panel).delegate('a', 'click', function() {
                $(ui.panel).load(this.href);
                return false;
            });
        }

    });
});

好的，所以在选项卡中的链接之间来回切换时，这可以正常工作。但是，在我的页面 def.html 上，我有一个按钮，我想用它来加载初始选项卡。我就是这样做的：

$("#cancelButton").click(function(event){
    event.preventDefault();
    $("#tabs").tabs('load', $("#tabs").tabs('option', 'selected'));
});

这调用我最初的 abc.html 就可以了。问题是，当我从新加载的 abc.html 再次调用 def.html 的链接时，对 def.html 的请求发生了两次。我再次单击我的cancelButton，它重定向到abc.html，我再次单击def.html，现在我的请求被调用三次，依此类推。

我猜测某个地方的某些东西被多次绑定，但不会被解除绑定。任何帮助都可以，谢谢。

Answer 1

好吧，我想通了。发生的事情是当我调用时，

$("#cancelButton").click(function(event){
    event.preventDefault();
    $("#tabs").tabs('load', $("#tabs").tabs('option', 'selected'));
});

只有 tabsload 事件才会触发。这意味着 tabsselect 事件之前没有被触发，因此链接没有被取消委托并且被绑定了多次。

解决这个问题的方法是取消委派，然后在加载时委派选项卡内容中的链接，删除任何选项卡选择功能。这是我的新选项卡定义：

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

Answer 2

我认为这是因为您在原始选择器 $("#tabs") 上调用方法，而不是在初始调用 tabs 的结果上调用方法。尝试保存引用并在取消按钮处理程序中使用它：

var $tabs = $("#tabs").tabs(...);

$("#cancelButton").click(function(event){
  event.preventDefault();
  $tabs.tabs('load', $tabs.tabs('option', 'selected'));
});