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

我使用jQuery加载方法动态生成了一个id=modal的：

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

---

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

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

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

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

jQuery方法是实现这一点的方法，对于较旧版本的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');
});

---

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

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

---

这应该涵盖所有输入、文本区域、选择、复选框、收音机等。

作为一个注释，从jQuery 1.7开始就不推荐使用，因此最好切换到“对不起”，以前是工作输入，在模态div中的appendTo之前加载，但现在两者都不工作，我不知道使用时有什么不同，我认为输入元素在模态div中找到，而不是在body中，但每个div必须在body中找到，我不知道，但它不工作。您可以将“body”更改为您喜欢的任何选择器。不过，这个选择器应该可以工作。您的模式HTML仍将在主体内部，因为它不能在主体外部。我还在index.php上加载了两个版本的jQuery，但只在函数live edit上工作：模式输入$'input'。live'keyup'，input'，函数{handler=$this.val；name=$this.attr'name'；alerthandler++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')
});