使用的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來改變id爲「weekcount」的div來包含另一個文本框，和我一起改回了原來的文本字段：

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

，此前KEYUP不再起作用，即使ID與以前一樣。有什麼我做錯了嗎？謝謝。

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