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

IT技术 javascript jquery
2021-02-06 00:35:49

我有一个<div>使用id="modal"jQueryload()方法动态生成的 with ：

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

word.edit.php包含一些输入元素，它们被加载到一个 modal 中<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');

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

5个回答

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

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');
});
非常有帮助的答案，非常感谢您的信息
2021-03-11 00:35:49
您的回答、您链接的文章以及@ernie 提到的<parentSelector>所有内容确实帮助我了解了.on()工作原理。谢谢！
2021-03-29 00:35:49

发生这种情况是因为您在连接事件后添加了 input 元素。尝试.on：

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

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

您可以更改'body'为您喜欢的任何选择器。不过，那个选择器应该可以工作。您的模态 HTML 仍将位于正文内部，因为它不能位于正文之外。
2021-03-29 00:35:49
我很抱歉，之前工作appendTo（）在这之前加载输入模式格但现在无论arent't的工作，我不明白的是不同的东西上使用，我认为在投入要素创立模式不是DIV体 ，但每个 div 必须在body 中找到，我不知道，但它不起作用
2021-04-02 00:35:49

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

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

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

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

你的最后一句话真的帮助我理解了这个概念。谢谢！
2021-03-26 00:35:49

函数绑定是在页面加载中进行的。处理使用函数 live () 动态创建的元素。例子：

$ ("p"). live ("click", function () {
    // Your function
});
请注意，.live()自 jQuery 1.7 起已弃用，因此切换到.on()是个好主意
2021-04-08 00:35:49

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

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

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

其它你可能感兴趣的问题
上一篇如何覆盖 OnBeforeUnload 对话框并将其替换为我自己的对话框？ 下一篇在 JavaScript 中生成随机字符串/字符