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

Question

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

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

$(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()到

Attach a handler to the event for all elements which match the current selector, now and in the future.

在您的代码中:

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

会变成

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

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