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

您目前直接绑定(bind)到 DOM 元素，但它被您的 innerHTML 赋值所取代，因此也失去了事件绑定(bind)(它是一个新的 DOM 元素)。

您想要的是使用委托(delegate)(“实时”)事件。看看 jQuery on function ，它很好地统一了所有事件处理模式。

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