由动态生成的元素触发的事件不会被事件处理程序捕获 [英] Events triggered by dynamically generated element are not captured by event handler

问题描述

我有一个< div> ，其中 id =modal使用jQuery <$ c动态生成$ c> load（）方法：

  $（'＃modal'）。load（'处理程序/ word.edit.php'）; 
  

word.edit.php 包含一些input元素，加载到模态< div> 。

使用jQuery的 keyup 方法我可以在事件触发后捕获输入值，但是当元素被动态添加到模态div时
，当用户输入文本时不会触发事件。

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

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

  $（'#add'）。click（function（）{
 $（'< input id = '+ i +'type =textname =translations'+ i +'/>'）
 .appendTo（'＃modal'）; 
  

捕获用户价值的代码是：

  $（'input'）。keyup（function（）{
 handler = $（this）.val（）; 
 name = $（this）.attr（'name'）; 
  

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

解决方案

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

jQuery .on 方法是这样做的方法（或 .delegate 旧版本的jQuery。）

  //如果版本1.7或更高版本
 
 $（'＃modal '）。on（'keyup'，'input'，function（）{
 handler = $（this）.val（）; 
 name = $（this）.attr（'name'）; 
}）; 
  

或旧版本

  //如果版本1.6或以下
 
 //请注意选择器和事件的顺序与
 $（'＃modal'）之上的顺序不同。委托（ 'input'，'keyup'，function（）
 {
 handler = $（this）.val（）; 
 name = $（this）.attr（'name'）; 
}）; 
  

I have a <div> with id="modal" generated dynamically with the jQuery load() method:

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

word.edit.php contains a few input element, which are loaded into a modal <div>.

Using jQuery's keyup method I can capture the input values after an event fires, but when the elements are added dynamically to the modal div, the event no llonger fires when the user enters their text.

Which jQuery method supports handling events triggered by dynamically created elements?

The code for creating the new input elements is:

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

The code for capturing the user's values is:

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

This second code block seems to work for the original elements, but it is not fired by the new dynamically generated elements.

解决方案

You need to delegate the event to the closest static ancestor element within the page (see also "Understanding Event Delegation"). This simply means, the element where you bind your event handler must already exist at the time the handler is bound, so for dynamically generated elements you must allow the event to bubble up and handle it further up.

The jQuery .on method is the way to do this (or .delegate for older versions of jQuery.)

// If version 1.7 or above

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

Or in older versions

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

这篇关于由动态生成的元素触发的事件不会被事件处理程序捕获的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！