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

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", "input", function() { 
    handler = $(this).val();
    name = $(this).attr('name');})

其中，父选择器是DOM中高于输入元素的元素，并且是页面加载时存在的元素，可能是表单ID或其他内容。

Answer 4

函数绑定是在页面加载时生成的。若要处理使用live()函数动态创建的元素，请执行以下操作。例子：

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