jQuery 未绑定到新创建的 <input> 元素答案

【问题标题】：jQuery Not Binding to Newly-Created <input> ElementjQuery 未绑定到新创建的 <input> 元素
【发布时间】：2013-03-03 17:02:06
【问题描述】：

这就是我所拥有的：

<script language="javascript">
$('#click').one('click', function () {
   var html = '<input type="text" class="input-mini" id="new-input" />';
   $(this).parent().append(html);
});
$('#new-input').on('keyup', function (e) {
   alert('A key was pressed');
   if (e.keyCode == 13) {
      alert('Enter key pressed');
   }
});
</script>

在other SO answers的推荐下，我发现我应该使用on()来绑定动态创建的元素。我想要发生的是在用户按下 ID 为 new-input 的 <input> 内的 Enter 键后发生 AJAX 调用。但是，当任何键被按下时，什么都不会发生。

我需要做什么才能将keyup 方法绑定到新附加的<input> 元素？

谢谢

【问题讨论】：

您的第一个事件处理程序中的“one”是不是一个错字？
不，这不是错字。
哦，这是一个真正的jQuery方法，我不知道......

标签： javascript jquery html binding

【解决方案1】：

阅读documentation

.on() 并不总是绑定动态创建的元素；只有当你传递一个选择器来监听时，它才会这样做：

$('some container').on('click', '.new-input', function() { ... });

另外，ID 必须是唯一的；你应该使用类。

【讨论】：

非常感谢。我使用了 ID，因为它在编辑器中很方便。我的真实代码有很大不同，实际上绑定到几个不同的东西来获取 keyup。如果允许，我会在 10 分钟内接受答案！

【解决方案2】：

在创建 keyup 绑定时，dom 上不会有匹配的元素 - 尝试在第一个回调中移动第二个绑定：

<script language="javascript">
    $('#click').one('click', function () {
       var html = $('<input type="text" class="input-mini" />');

       html.on('keyup', function (e) {
           alert('A key was pressed');
           if (e.keyCode == 13) {
               alert('Enter key pressed');
           }
        });

       $(this).parent().append(html);
    });
</script>

【讨论】：

【解决方案3】：

jsFiddle 链接：http://jsfiddle.net/qTd9c/

$('#click').one('click', function () {
    var html = '<input type="text" class="input-mini" id="new-input" />';
    $(this).parent().append(html);

    $('#new-input').on('keyup', function (e) {
        alert('A key was pressed');
        if (e.keyCode == 13) {
            alert('Enter key pressed');
        }
    });

});

【讨论】：