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

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

之所以会发生这种情况，是因为要添加输入元素后你监听了这件事。试一试.关于:$('body').on('keyup', 'input', function() {     handler = $(this).val();     name = $(this).attr('name');});使用.on将确保keyup事件连接到最初在页面上的输入，以及稍后动态添加的任何输入。

Answer 3

动态更改DOM时，jQuery不会将事件处理程序附加到它们。你需要用关于()和委托的事件对于输入项，您需要如下所示：$("<parentSelector>").on("keyup",&nbsp;"input",&nbsp;function()&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;handler&nbsp;=&nbsp;$(this).val(); &nbsp;&nbsp;&nbsp;&nbsp;name&nbsp;=&nbsp;$(this).attr('name');})其中，父选择器是DOM中高于输入元素的元素，并且是页面加载时存在的元素，可能是表单ID或其他内容。

Answer 4

函数绑定是在页面加载时生成的。若要处理使用live()函数动态创建的元素，请执行以下操作。例子：$&nbsp;("p").&nbsp;live&nbsp;("click",&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Your&nbsp;function});