JQuery UI Tabs - 为通过 ajax 加载的选项卡重新绑定事件

Question

当通过 ajax 加载选项卡时，是否有适当的方法在 JQuery UI 中重新绑定事件。例如，在下面的代码中，我让成功事件调用了一个“initBinding()”函数，该函数为不同的类设置了一些自定义点击事件处理程序。这样做的问题是，当我多次切换选项卡，然后触发其中一个点击事件时，我会得到一些奇怪的屏幕闪烁效果。如果我刷新整个页面，然后直接进入点击事件，它不会闪烁。所以我认为这与它绑定多次有关。

如果我从成功事件中取出“initBinding()”方法，任何通过 ajax 加载的选项卡都不会触发我设置的任何事件。有没有标准/更好的方法来处理这样的绑定事件？

$(document).ready(function () {
    $("#tabs").tabs({
        select: function (event, ui) {
            var tabID = "#ui-tabs-" + (ui.index + 1);
            $(tabID).html("<b>Fetching Data....Please wait....</b>");
        },
        ajaxOptions: {
            error: function (xhr, status, index, anchor) {
                $(anchor.hash).html("Could not load tab data");
            },
            success: function (xhr, status, index, anchor) {
                initBinding();
            }
        }
    });
});
function initBinding() {
    $(".editButton").click(function () {
        //event logic...
    });
}

Answer 1

你应该使用jQuery的.live()来

将处理程序附加到与当前选择器匹配的所有元素的事件，现在和将来。

在您的代码中：

$(".editButton").click(function () {

会变成

$(".editButton").live('click', function () {

使用这种技术，您可以完全删除initBinding() 函数，并在onready 函数中使用.live() 语句。