jQuery UI ajax选项卡 - 在加载选项卡中的链接时请求倍增 [英] jQuery UI ajax tabs - requests multiplying when loading links within tabs

问题描述

我正在使用jQuery UI标签，通过ajax加载标签内容。内容可能包含我想在所选标签中加载的链接。为此，我使用此代码

I'm using jQuery UI tabs, loading the tab content via ajax. Content may contain links which I want to load within the selected tab. To achieve that, I use this code

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

我使用live（），以便在初始加载后加载的链接也被覆盖。

I use live() so that the links loaded after the initial load are also covered.

现在，想象一下你有两个标签的情况。首先，用户在tab_a中，其中包含链接。用户单击tab_a中的链接，它打开正常。然后，选择tab_b，然后选择tab_a，再次选择链接。

Now, imagine a situation where you have 2 tabs. First, the user is in tab_a, which contains links. The user clicks a link within tab_a and it opens fine. Then, tab_b is selected, then tab_a, and the link within again.

这样的：tab_a - > link in - > tab_b - > tab_a - > link in

so that's: tab_a -> link within -> tab_b -> tab_a -> link within

现在第二次选择tab_a后，以及之后的链接，点击链接后我收到两个请求。如果我重复这个过程，一旦我点击tab_a中的链接，我将收到三个请求等等。

Now after tab_a is selected for the second time, and the link within after that, I get two requests when link is clicked. If I repeat the process, once I click on link within tab_a, I'll get three requests and so on.

我无法理解正在发生的事情在这里。

I can't quite get the grip on what's going on in here.

.targetBlank类用于不打算在选项卡中打开的链接。它并不是特别相关，但我认为我也会分享它，如果它在某种程度上证明是重要的。

.targetBlank class is for links that are not intended to open within a tab. It's not particularly relevant, but I thought I'd share it as well, if it turns out to be important somehow.

推荐答案

如果内容已被绑定，则需要设置标记，或者在标签更改时取消绑定内容。

You need to set a flag if the content has already been bound, or unbind the content on tab change.

类似 ui.panel.find （'a'）。unbind（）应该这样做。确保将其放在标签更改回调中。

Something like ui.panel.find('a').unbind() should do the trick. Make sure you put it in the tab change callback.

这篇关于jQuery UI ajax选项卡 - 在加载选项卡中的链接时请求倍增的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！