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

我有一个与id="modal"与jQuery的load()方法dynamic生成的<div>

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

word.edit.php包含一些input元素,它们被加载到一个模式<div>

使用jQuery的keyup方法,我可以捕获事件触发后的input值,但是当元素被dynamic地添加到模态div时,当用户input文本时不会再触发事件。

哪个jQuery方法支持由dynamic创build的元素触发的处理事件?

创build新的input元素的代码是:

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

捕获用户值的代码是:

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

第二个代码块似乎适用于原始元素,但不会由新的dynamic生成的元素触发。

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

jQuery .on方法是这样做的(或者老版本的jQuery的.delegate )。

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

发生这种情况是因为连线事件添加input元素。 试试.on :

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

使用.on将确保keyup事件连接到最初在页面上的input,以及任何稍后dynamic添加的input。

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

对于你的input项目,你需要这样的东西:

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

如果parentSelector在DOM中比input元素高一些,并且在页面加载时存在一个元素,可能是表单ID或其他东西。

函数绑定是在页面加载中进行的。 处理使用函数live()dynamic创build的元素。 例:

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

如果您需要捕获所有表单元素的更改,特别是select框,我知道这里没有提到它们,但是知道这一点很有帮助,请使用以下代码:

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

这应该涵盖所有inputtextareaselectcheckboxradio