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

我使用jQuery

load（）

方法动态生成了一个带有

id=“modal”

的

：

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

word.edit.php

包含一些输入元素，这些元素被加载到模态

中

使用jQuery的

keyup

方法，我可以在事件触发后捕获输入值，但是 当元素被动态添加到modal div时，当用户输入它们的文本时，将触发no llonger事件

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

创建新输入元素的代码为：

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

---

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

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

---

使用

.on

将确保

keyup

事件连接到最初在页面上的输入，以及以后动态添加的任何输入。

动态更改DOM时，jQuery不会将事件处理程序附加到它们。你需要使用

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

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

$（“”）。在（“键控”、“输入”和函数（）上{
handler=$（this.val（）；
name=$（this.attr（'name'）；
})

---

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

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

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

您需要找到页面中最接近的静态祖先元素（另请参见）。这仅仅意味着，绑定事件处理程序的元素在绑定处理程序时必须已经存在，因此对于动态生成的元素，必须允许事件冒泡并进一步处理它

jQuery方法就是实现这一点的方法（或者对于较旧版本的jQuery）

或者在旧版本中

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

---

如果您需要捕获所有表单元素（尤其是选择框）的更改，我知道这里没有提到这些更改，但了解这些更改很有帮助，请使用以下代码：

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

---

这应该涵盖所有的

输入

，

文本区

，

选择

，

复选框

，

无线电

，等等。

注意，从jQuery 1.7开始就不推荐使用，所以很抱歉，切换到appendTo（）之前加载的工作输入是个好主意在modal div中，但现在两者都不起作用，我不知道使用时有什么不同，我认为inputs元素在modal div中不在body中找到，但每个div必须在body中找到，我不知道，但它不起作用。您可以将

“body”

更改为您喜欢的任何选择器。不过，这个选择器应该可以工作。你的模态HTML仍将在主体内，因为它不能在主体外。我也在index.php

上加载了两个版本的jQuery，但不在函数上工作，只在函数上工作live edit:#模态到输入

$（'input'）。live（'keyup'，'input'，function（）{handler=$（this）.val（）；name=$（this.attr（'name'））；警报（处理程序+“”+名称）；}）当我使用代码使其工作正常时，再次感谢您的帮助：）请注意。您不会加载两个版本的JQuery。加载JQuery的1.6.2版和JQuery UI的1.8.18版。JQuery UI用于用户界面组件，与JQuery不同。为了获得最佳实践，请尝试使用谷歌等在线资源中的JQuery，而不是本地文件。@Carlos Eduardo Bruno Pereira感谢您的良好清理，我始终认为两者都有相同的软件包，只有-ui添加了额外的功能，但事实并非如此：）您的答案可能重复，您链接的文章，@ernie提到
这一切确实帮助我理解了
.on（）
的工作原理。非常感谢。非常有用的回答，非常感谢你提供的信息你的最后一句话真的帮助我理解了这个概念。非常感谢。
// 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');
});

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