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()语句。

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

1 个答案: