Использование innerHTML нарушает функцию KeyUp

Question

Так у меня есть текстовое поле:

number of weeks <div id = "weekcount"><input type="text" id="numweeks" name="numweeks" value="" class = "dialog_inputfield" /></div><br /> 

и функция Javascript, который проверяет при изменении значения в этом текстовом поле в любой точке:

$('#numweeks').keyup(function(event) { 
     var date = $('#datepicker').val(); 
     var numWeeks = $('#numweeks').val(); 
     change(calculate(date, numWeeks)); 
}); 

и что работает отлично. Но я использовал innerHTML изменить DIV с идентификатором «weekcount», чтобы содержать другое текстовое поле, и я изменил его обратно в исходном текстовом поле с:

document.getElementById('weekcount').innerHTML = '<input type="text" id="numweeks" name="numweeks" value="" class = "dialog_inputfield" />' 

После этого KeyUp больше не работает, даже если ид такая же, как и раньше. Есть ли что-то, что я делаю неправильно? Благодарю.

Answer 1

В настоящее время вы привязываетесь непосредственно к элементу DOM, но заменяетесь его назначением innerHTML, тем самым также теряя привязку события (это новый элемент DOM).

Вы хотите использовать делегированное («живое») событие. Посмотрите на jQuery on function, он прекрасно сочетает все шаблоны обработки событий.

$('#weekcount').on('keyup', '#numweeks', function(event) { 
     var date = $('#datepicker').val(); 
     var numWeeks = $('#numweeks').val(); 
     change(calculate(date, numWeeks)); 
});