Question

我已经制作了一个通用函数来在我的应用程序中显示jQuery对话框。这个功能只是

设置对话框标题
对服务器端函数进行ajax调用，并使用返回的html填充对话框
打开对话框

这是功能：

function loadDialog(action, id, title, onCloseHandler) {
    $("#__gsl_DialogPanel").dialog("option", "title", title);
    var url = action;
    if (id != "") url = url + "/" + id;
    $.ajax({
        type: "get",
        dataType: "html",
        url: url,
        data: {},
        success: function(response) {
            $("#__gsl_DialogPanel").html('').html(response).dialog('open');
        }
    });
    $("#__gsl_DialogPanel").bind("dialogclose", function(event, ui) {
        if (onCloseHandler != null)
            onCloseHandler();
    });
}

正如您所看到的，函数实际上甚至将函数绑定到dialogclose事件，因此当关闭对话框时，该函数会被调用。如果我使用对话框添加/编辑/删除网格中的元素，此功能特别有用：我可以传递执行网格更新的功能，当对话框关闭时，网格将自行更新。

我遇到的情况是，在某些情况下，绑定到dialogclose事件的函数被多次调用，我怀疑问题与多次调用loadDialog的事实有关function将绑定同一个close处理程序的多个引用。

我说错了吗？我是否必须明确取消绑定对话框关闭的所有内容？

感谢您的帮助！

更新：

根据收到的答案，我只是取消绑定并再次绑定功能处理程序，一切正常！这是更新后的代码

$("#__gsl_DialogPanel").unbind("dialogclose").bind("dialogclose", function(event, ui) {
    if (onCloseHandler != null)
        onCloseHandler();
    });
}

Answer 1

在DOM级别2中，多个侦听器可以绑定到给定元素上的事件，因此对loadDialog()的多个调用完全可以将多个侦听器绑定到dialogClose事件。

如果ID中包含__gsl_DialogPanel的元素仍然存在于DOM中，无论是否显示该对话框，您肯定最终会将多个侦听器绑定到dialogClose事件并多次调用{{ 1}}。

Answer 2

jQuery为自定义事件提供了很好的语法：'eventName.pluginName' 这样，您可以绑定相同的事件，但区分不同的处理程序。

调用trigger('eventName')将触发所有处理程序

在你的情况下，你可以解开你的事件，并让别人独自一人。

示例：

<input id="btn" type="button" value="Button">

使用Javascript：

$('#btn').bind('myEvent',function(){
    alert('myEvent.other plugins');
});

$('#btn').bind('myEvent.myPlugin',function(){
    alert('myEvent.myPlugin');
});

//use this in your loadDialog function for the dialogClose event
$('#btn').unbind('myEvent.myPlugin').bind('myEvent.myPlugin',function(){
    alert('myEvent.myPlugin');
});

$('#btn').trigger('myEvent');

您可以试试live jsFiddle example。

jQuery bind（）问题？

2 个答案: