Не удается обнаружить измененный идентификатор

Question

Когда я меняю идентификатор кнопки, я не могу найти новый идентификатор с включенным. («Click»). Функция console.log() обнаруживает, что она изменена, но я не могу ее обнаружить с помощью функции on().

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"); 
}); 

Так мне это нужно, чтобы предупредить "Привет" после того, как я нажал на изменения. Он меняет идентификатор, который я проверил, с элементом проверки.

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

Answer 1

Изменить

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

в

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

Причина этого заключается в том, что Вы желаете использовать delegate форму .on(). Этот вызов немного отличается тем, что в качестве второго параметра требуется «строка». Эта строка является селектором для вашего «динамического» элемента, в то время как основной селектор должен быть либо родительским контейнером (не созданным динамически), либо самим document.

jsFiddle

Answer 2

.attr() функция не есть обратный вызов и, таким образом, она не может быть проверено, если вы установили интервал с помощью setInterval, но сама функция выполняет довольно скоро, так что вы не собираетесь нуждаться в этом.

Для решения проблемы в ручном мероприятии делегация, предлагаемая tymeJV, является правильным способом ее выполнения.

Answer 3

Вы устанавливаете событие onclick для newBtn при загрузке страницы в первый раз, но, к сожалению, newBtn недоступно в это время. следовательно, после изменения идентификатора он не будет вызывать функцию onclick для newBtn.

вы можете сделать одно дело, чтобы заставить его работать, установите событие onclick для newBtn внутри той же функции, где вы меняете идентификатор, как показано ниже.

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