如何将事件绑定到模式对话框上的组件

How to bind events to components on a modal dialog?

本文关键字：对话框 组件 模式 事件 绑定      更新时间：2024-02-22

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

这是我在javascript的开头，在ready函数的开头所做的：

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

稍后，当我点击一个按钮时，我会这样做：

$('#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();
}
});

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

警报（"已单击"）；永远不会被触发。

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

由于您的选择将在#dialog模态中，并且#dialog modal存在于domready上（并且从未销毁？），因此您可以使用$.on（）

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

但是，当在dom中包含#select_all时，您也可以绑定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();
}

您可以将其与.on方法绑定，该方法在最近的jQuery版本中取代了.live。在这种情况下，您可以将其绑定到DOM准备就绪时已知的内容（如主体）。现在你只需要绑定一次，每次你点击#select_all时它就会启动。

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

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

相关文章：