Question

我正在重新渲染包含jQuery-ui标签的页面的一部分。重新呈现后，标签标题不再绑定到事件。

您是否可以首先使用delegate（）或live（）初始化选项卡并避免此问题，或者之后是否需要重新绑定$（'foo'）。tabs（）？

Answer 1

简短回答是肯定的，您必须在追加想要列表的内容后再次致电$("foo").tabs()。

然而，有一个非常好的plugin called livequery，它将实际完成您所追求的目标。使用该插件，您可以编写如下代码：

$(document).ready(function() {
    // When a new element with class "tabs" underneath the body element appears, apply the 
    // .tabs() function:

    $("body .tabs").livequery(function() {
        $(this).tabs();
    });
});

示例： http://jsfiddle.net/andrewwhitaker/vpnJt/

如果您不想为此使用插件，我会将此类事物的初始化代码移动到您在AJAX成功中调用的函数中。

Answer 2

您应该能够将标签事件附加到不要重新加载的标签的父元素。为了安全起见，您始终可以使用live()，因此它位于DOM树的根部。或者如果你想更精确，你可以做类似以下的事情。

<div id="container">
  <div id="tabs"><!-- tabs to be reloaded --></div>
</div>

假设不重新加载#container，您可以这样做：

$('#container').delegate('#tabs', 'tabsshow', function(event, ui) {
  // some action when tabs has been shown
}

Answer 3

重新渲染tabheaders似乎存在问题。我正在重新渲染一个背景标签，当tabheader拿着一个计数器时，我正在重新渲染tabheader以增加标签。

这打破了标签结构，无法重新应用事件监听器。唯一的jquery ui解决方案是销毁和重建标签，这在我们的情况下是不可接受的。

我通过简单地在背景选项卡中重新渲染并调用oncomplete函数来解决问题，该函数使tabheader上的计数器递增。

使用带有jQuery ui选项卡的delegate（）或live（）

3 个答案: