javascript 如何将事件绑定到模态对话框上的组件？

How to bind events to components on a modal dialog?

提问by Nicsoft

I am using jQuery's modal dialogfor opening a dialog containing a form. What I cannot solve is how to bind events to components that is added to my modal dialog. In this case, I want to bind click or change to a checkbox that has been positioned in the dialog. There doesn't seem to be any success-method that is triggered when the dialog has been loaded. This is how I do it:

我正在使用 jQuery 的模式对话框打开一个包含表单的对话框。我无法解决的是如何将事件绑定到添加到我的模态对话框中的组件。在这种情况下，我想将单击或更改绑定到已定位在对话框中的复选框。加载对话框时似乎没有触发任何成功方法。这就是我的做法：

This I do in the beginning of my javascript, in the beginning of the ready-function:

这是我在我的 javascript 的开头，在 ready-function 的开头做的：

$( "#dialog:ui-dialog" ).dialog( "destroy" );

$( "#dialog-modal" ).dialog({
    autoOpen: false,
    show: "blind",
    hide: "explode",
    minWidth: 400,
    modal: true
 });

A bit later I do this when clicking a button:

稍后我在单击按钮时执行此操作：

$('#dialog-modal').dialog( "option", "title", lang.localized_text.ADD_AGENT);
$('#dialog-modal').live('dialogopen', function(msg){
        alert("Opens");
        $("#select_all").live('click', function(msg){
               alert("clicked");  
        });

 });
$.get("https://" + hostname +  "/modules/core/useradmin/adminactivities/admin_add_agent.php",function(e){
     var obj = $.parseJSON(e);
     $("#dialog-modal").html(obj.html);
     $("#dialog-modal").dialog("open");
     addAddAgentValidation();
}
});

One can clearly see that alert("Opens") is presented before the dialog is opened. Hence, dialogopen is triggered before the dialog has finished loading. But the validation handler (calls the validate function which binds the validation checks) works.

可以清楚地看到，在打开对话框之前显示了 alert("Opens")。因此，在对话框完成加载之前触发 dialogopen。但是验证处理程序（调用绑定验证检查的验证函数）可以工作。

alert("clicked"); is never triggered.

警报（“点击”）；永远不会被触发。

How can I bind any event to a component on the modal dialog? Is there any callback function when the dialog has been created.

如何将任何事件绑定到模态对话框上的组件？创建对话框时是否有任何回调函数。

采纳答案by Shikiryu

Since your select will be in #dialog-modal and since #dialog-modal is present on domready (and never destroyed ?), you could use $.on()

由于您的选择将在 #dialog-modal 中，并且由于 #dialog-modal 存在于 domready 中（并且从未被销毁？），您可以使用 $.on()

$('#dialog-modal').on('click', '#select_all', function(e){
    alert('clicked');
});

But you could also bind the click event whenyou include #select_all into the dom.

但是您也可以在将 #select_all 包含到 dom 中时绑定 click 事件。

$.get("https://" + hostname +  "/modules/core/useradmin/adminactivities/admin_add_agent.php",function(e){
     var obj = $.parseJSON(e);
     $("#dialog-modal").html(obj.html);
     $('#select_all').click(function(e){
         alert('clicked');
     });
     $("#dialog-modal").dialog("open");
     addAddAgentValidation();
}

回答by bohawi

You can bind it with the .on method, which replaced .live in a recent jQuery release. In this case you bind it to something that you know is there when the DOM is ready (like the body). Now you only need to bind once and it will fire every time you click on a #select_all.

您可以使用 .on 方法绑定它，该方法在最近的 jQuery 版本中取代了 .live。在这种情况下，您将它绑定到 DOM 准备就绪时您知道的东西（如主体）。现在您只需要绑定一次，每次点击#select_all 时它都会触发。

$("body").on('click', '#select_all', function () {
    alert("clicked");  
});

http://api.jquery.com/on/

http://api.jquery.com/on/