javascript - 使用 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 元素）。

您想要的是使用委托（“实时”）事件。看看jQueryon函数，它很好地统一了所有事件处理模式。

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