javascript - 在动态创建的字段上捕获 javascript 事件

Question

我有一个名为“form_inputtext1”的类的输入字段。

我在按 ENTER 时正在执行一些操作，使用此代码:

jQuery(".form_inputext1").keypress(function(event) {
      console.log(event.keyCode);
      if (event.keyCode == '13' || event.which == '13') {
         event.preventDefault();

         jQuery("#addMoreOptions").click();

         return false;
      }
    });

这部分工作正常。它所做的其中一件事是，作为 ajax 调用的结果，它添加了一个类“form_inputtext1”的输入字段。

问题是这个新添加的字段与我编写的按键事件没有关联。我认为这是因为 jQuery 代码仅将事件附加到现有字段，而不附加到将来添加的字段。

我该如何解决这个问题？我希望此功能适用于 onkeypress，即使对于尚未在 DOM 中的输入也是如此。

Answer 1

您可以使用 Jquery 的 live :

jQuery(".form_inputext1").live('keypress', function(event) {
      console.log(event.keyCode);
      if (event.keyCode == '13' || event.which == '13') {
         event.preventDefault();

         jQuery("#addMoreOptions").click();

         return false;
      }
});

或者您可以在创建元素时添加按键事件，这会给您带来更好的性能:

$('.clicker').click(function() {
    $('<div class="clicker" />').text('new').appendTo($(this)).keypress(function(event) {
        alert(event.which);
    })
})

Example of that