Question

我使用jQuery <div>方法动态生成了id="modal" load()：

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

word.edit.php包含一些输入元素，这些元素被加载到模态<div>中。

使用jQuery＆＃39; 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

您需要delegate the event到页面中最近的静态祖先元素（另请参阅"Understanding Event Delegation"）。这只是意味着，绑定事件处理程序的元素在绑定处理程序时必须已经存在，因此对于动态生成的元素，您必须允许事件冒泡并进一步处理它。 / p>

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事件最初连接到页面上的输入，以及以后动态添加的任何输入。

Answer 3

当您动态更改DOM时，jQuery不会将事件处理程序附加到它们。您需要使用on() and delegated events

对于您的输入项目，您需要以下内容：

$("<parentSelector>").on("keyup", "input", function() { 
    handler = $(this).val();
    name = $(this).attr('name');
})

其中parentSelector在DOM中比输入元素更高，并且在页面加载时存在元素，可能是表单ID或其他内容。

Answer 4

功能绑定在页面加载中进行。使用函数live（）动态创建的元素。例如：

$ ("p"). live ("click", function () {
    // Your function
});

Answer 5

如果你需要捕获所有表单元素的更改，特别是选择框，我知道这里没有提到它们，但知道它们是有帮助的，使用下面的代码：

$(document).on('change', ':input', function () {
   alert('value of ' + $(this).attr('name') + ' changed')
});

这应涵盖所有input，textarea，select，checkbox，radio等。

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

5 个答案: