使用 innerHTML 会破坏 keyup 功能答案

【问题标题】：Using innerHTML breaks the keyup function使用 innerHTML 会破坏 keyup 功能
【发布时间】：2013-05-27 17:20:11
【问题描述】：

所以我有一个文本字段：

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 与以前相同。有什么我做错了吗？谢谢。

【问题讨论】：

标签： javascript html innerhtml onkeyup

【解决方案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));
});

【讨论】：

好答案。这些天来，所有代表都在使用on