javascript - How to bind events to components on a modal dialog? - Stack Overflow

admin管理员组

文章数量:1279148

I am using jQuery's modal dialog for opening a dialog containing a form. What I cannot solve is how to bind events to ponents 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:

This I do in the beginning of my javascript, in the beginning of the 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("clicked"); is never triggered.

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

I am using jQuery's modal dialog for opening a dialog containing a form. What I cannot solve is how to bind events to ponents 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:

This I do in the beginning of my javascript, in the beginning of the 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("clicked"); is never triggered.

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

• javascript
• jquery
• html
• modal-dialog
• event-binding

Share Improve this question Follow asked Jul 24, 2012 at 13:48 NicsoftNicsoft 3,71299 gold badges4343 silver badges7171 bronze badges 7

• What version of jQuery are you using live is deprecated in 1.7. Also binding it on open means if it is opened more than once, you will keep adding events to the elements every time. – epascarello Commented Jul 24, 2012 at 13:55
• You should use jQuery UI dialog event : jqueryui./demos/dialog/#event-open Plus, $.live() is deprecated I think. – Shikiryu Commented Jul 24, 2012 at 13:56
• live is deprecated but it still works... – Tomer Commented Jul 24, 2012 at 13:57
• I can't seem to recreate this issue --and deprecated != nonfunctional @Shikiryu - He is using the event. Did you even see his code? $('#dialog-modal').live('dialogopen' is what is suggested to bind with. He just used .live() instead of .bind() which works as intended, anyway. – Ohgodwhy Commented Jul 24, 2012 at 14:01
• I'm using jquery 1.7.2. @Shik, that's the link I included in my post. Checking out your jsfiddle now. There is a difference in how to set the content pared to how I do it, can that make a difference? – Nicsoft Commented Jul 24, 2012 at 14:13

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 5

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').on('click', '#select_all', function(e){
    alert('clicked');
});

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

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

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.

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

http://api.jquery./on/

本文标签： javascriptHow to bind events to components on a modal dialogStack Overflow