由动态生成的元素触发的事件不会被事件处理程序捕获

Question

我有一个<div>使用id="modal"jQuery load()方法动态生成的:

$('#modal').load('handlers/word.edit.php');

word.edit.php包含一些输入元素,它们被加载到一个模态中<div>.

使用jQuery的keyup方法我可以在事件触发后捕获输入值,但是当元素被动态添加到模态div时,当用户输入文本时,事件不会激活.

哪个jQuery方法支持处理由动态创建的元素触发的事件？

用于创建新输入元素的代码是:

$('#add').click(function() {
    $('<input id="'+i+'" type="text" name="translations' + i + '"  />')
      .appendTo('#modal');

捕获用户值的代码是:

$('input').keyup(function() {
    handler = $(this).val();
    name = $(this).attr('name');

第二个代码块似乎适用于原始元素,但新动态生成的元素不会触发它.

Answer 1

您需要将事件委托给页面中最近的静态祖先元素(另请参阅"了解事件委派").这只是意味着,绑定事件处理程序的元素必须在绑定处理程序时已经存在,因此对于动态生成的元素,您必须允许事件冒泡并进一步处理它.

jQuery .on方法是这样做的方法(或者.delegate对于旧版本的jQuery.)

// If version 1.7 or above

$('#modal').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

或者在旧版本中

// If version 1.6 or below

// note the selector and event are in a different order than above
$('#modal').delegate('input', 'keyup', function()
{
    handler = $(this).val();
    name = $(this).attr('name');
});

Answer 2

发生这种情况是因为您在连接事件后添加了输入元素.试试.on:

$('body').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

使用.on将确保keyup事件连接到最初页面上的输入,以及以后动态添加的任何输入.