JQuery UI选项卡 - 通过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()完全删除该函数,并使用.live()onready函数中的语句.