用于更改文本输入的 jQuery 事件委托答案

【问题标题】：jQuery Event Delegation for text input on change用于更改文本输入的 jQuery 事件委托
【发布时间】：2013-12-19 20:06:25
【问题描述】：

我正在尝试将 on change 事件附加到我动态插入的输入中。 HMTL 的开头是这样的：

<div id="myDiv"></div>

然后在页面处于活动状态时将 HTML 注入其中（它通过 ajax 加载，因此它使用成功函数而不是 onReady）：

$("#myDiv").html('<table><tr><td><input type="text" class="myInput"></td></tr></table>');

为了附加一个 onChange 事件处理程序，我在文档的 onReady 中有以下事件委托事件绑定：

$("#myDiv").on('change', 'input.myInput', function(){ alert($(this).attr('id')); })

是不是我做错了什么，事件永远不会被触发。

【问题讨论】：

标签： jquery event-delegation

【解决方案1】：

Javascript 区分大小写，您的班级名称是 myinput，但您正在收听 myInput，请更改其中一个。

【讨论】：

【解决方案2】：

$("body").on('change', '.myinput', function(){ alert($(this).attr('id')); });

试试这个：http://jsfiddle.net/h7wyS/。

$("#myDiv").html('<table><tr><td><input type="text" class="myInput"> </td></tr></table>');

// added the 'blur' too.
$("#myDiv .myInput").on('change, blur', function(e){ 
    alert($(this).parents('div:first').attr('id'));
});

【讨论】：

这必须更接近，但仍然无法正常工作。有一点我没有想到，div #myDiv 是在通过 ajax 填充的模态对话框中创建的，然后在成功时由 javascript 填充 div。所以附着在身体上绝对是朝着正确方向迈出的一步。但是，它没有用。

【解决方案3】：

需要注意的是，您在第二行中使用了驼峰式大小写，实际上应该是“myinput”。而且这个元素没有 Id，所以你可能想添加 id，否则你会在警报框中得到未定义。

【讨论】：