由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') });
这应该涵盖所有input ， textarea ， select ， checkbox ， radio等
