jQuery不绑定新创建的<input>元素

jQuery Not Binding to Newly-Created <input> Element

本文关键字：input 元素 绑定 新创建 创建 jQuery      更新时间：2023-09-26

我有:

<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>

根据其他SO答案的建议，我发现我应该使用on()来绑定动态创建的元素。我想要发生的是在用户按下ID为new-input的<input>内的Enter键后发生AJAX调用。然而，当按下任何键时，什么也不会发生。

为了将keyup方法绑定到新附加的<input>元素，我需要做些什么?

谢谢

阅读文档

.on()并不总是绑定动态创建的元素;只有当你在:

内部传递一个选择器来监听时，它才会这样做
$('some container').on('click', '.new-input', function() { ... });

同时，id必须是唯一的;

在创建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>

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');
        }
    });
});
相关文章：