Question

I am having some difficultly switching out my live() scripts to on(). I have multiple on() in the same js file that fire. For some reason, when I switched to on(), the the first click fired but the second did not. Here is my code.

When this is fired, a window opens.

$("#Add_Member").on("click",function() {
    // Do Something
}); 

Which allows me to use this. But when I click…

$("#Close_Add_Member").on("click",function() {
});

Nothing happens. Any suggestions?

UPDATED – This is the first click that is fired in detail

$("#Add_Member").on("click",function() {
        // Get Member ID    
        var Member_id = $(".Window").attr("id");    
        var dataString = "MemberId="+Member_id+"";

    $.ajax({
        type: "POST",
        url: "includes/file.php",
        timeout: 3000,
        data: dataString,
        cache: false,
        success: function(myhtml){
            // Success
        }
    });

}); // End Add Member

Answer 1

Presumably, the element with Close_Add_Member is not defined until after the Add_Member click opens and renders a new part of the DOM? That being the case, you can’t use the .bind() style of binding with .on(), but instead have to use the .delegate() style, like so:

$(document).on("click", "#Close_Add_Member", function () {

});

Of course, it would be better to use a closer parent to #Close_Add_Member than just document, but whatever you choose has to contain #Close_Add_Member and exist when you make the call to .on().