Question

这就是我所拥有的：

<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()绑定动态创建的元素。我想要发生的是在用户按下标识为<input>的{{1}}内的Enter键后进行AJAX调用。但是，任何按键都没有任何反应。

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

由于

Answer 1

阅读documentation

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

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

此外，ID必须是唯一的;你应该使用课程。

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

Answer 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');
        }
    });

});

jQuery没有绑定到新创建的<input />元素

3 个答案:

阅读documentation