无法检测到已更改的ID

Question

When I change the id of a button I cannot find the new id with on.("click"). The function console.log() does detect that it's changed but I cannot detect it with the on() function.

HTML:

<form id="formName" action="" method="post">
    <input type="submit" id="submitBtn" value="Submit" />
</form>
<button id="change">Change</button>

JS:

$("#change").on("click", function(){
    $("#submitBtn").attr("id", "NewBtn"); 
});

$("#formName").submit(function(e){
    e.preventDefault();
});

$("#NewBtn").on("click", function(){
    alert("Hello"); 
});

So I need it to alert "Hello" after I have clicked on change. It does change the id I checked that with inspect element.

Fiddle: http://jsfiddle.net/WvbXX/

Answer 1

Change

$("#NewBtn").on("click", function(){

to

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

The reason for this is that you're wanting to use the delegate form of .on() . This call is a little different in that it takes a "string" as the second parameter. That string is the selector for your "dynamic" element while the main selector need either be a parent container (not created dynamically) or the document itself.

jsFiddle

Answer 2

you are setting onclick event for newBtn on load of page for the first time but unfortunately newBtn not available that time. hence after changing the id it will not trigger onclick function for newBtn.

you can do one thing to make it work, set onclick event for newBtn inside the same function where you are changing the id like below.

$("#change").on("click", function(){
    $("#submitBtn").attr("id", "NewBtn"); 
    // set on click event for new button
    $("#NewBtn").on("click", function(){
    alert("Hello"); 
});
});

Answer 3

.attr() function does not have a callback and thus it cannot be checked unless you setup an interval using setInterval but the function itself executes pretty soon so you are not going to need it.

For solving the problem in hand event delegation proposed by tymeJV is the right way to do it.