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'));
});

只有tabload事件才会触发。这意味着之前没有触发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'));
});

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

2 个答案: