jQuery click事件不适用于动态添加的元素

Question

我一直在尝试在此代码上使用jQuery，但它没有响应。 我动态地尝试将一些行添加到HTML表的末尾，并且还包括了一个“取消”按钮。 取消按钮上的点击功能似乎无效。

我无法在此处发布完整的代码，因此我包含了jsFiddle的链接。

JavaScript代码的一部分：

$('#myTable tbody:last').after('<tbody class="newrow"><tr><td> <input  type="text" class="app"></td><td><input type="text" class="env"> |\n\
 </td><td><input type="text" class="region"> | </td><td><input type="text"  class="url"> | \n\
</td><td><button class="cancel">X</button></td>\n\
</tr></tbody>');          
}

$('.cancel').on('click', function() {
    alert();
   //$(this).closest('tbody').fadeOut(2000); 
});

Answer 1

您需要使用委派事件，才能捕捉到动态添加的元素的点击事件。

在实施注释中建议的更改之后，将您的点击处理程序更改为此

$('body').on('click','.cancel', function() {
    console.log($(this));
    //$(this).closest('tbody').fadeOut(2000); 
});

这将在浏览器控制台中输出，已单击该按钮，它也应该在新元素上起作用。

Answer 2

为每个取消obj创建唯一的类

<button class="cancel' + counter + '">X</button>

然后启动触发器，然后是完整解决方案：

     var counter = 0;//specify counter variable to create unique cancel class
     $('.addfinal').click(function(){   
          n=$('.addno').val();
          for(var i=0;i<n;i++){

         $('#myTable tbody:last').after('<tbody class="newrow"><tr><td><input type="text" class="app"></td><td><input type="text" class="env"> |\n\                  </td><td><input type="text" class="region"> | </td><td><input type="text"      class="url"> | \n\</td><td><button class="cancel' + counter + '">X</button></td>\n\</tr></tbody>');
     } 


            cancel($(".cancel"+counter))
            counter++;
     });
});

当您为cancel类启动click事件时，该类尚不存在，请尝试将其包装在函数中，并为将与该行创建的每个cancel obj附加此click事件，您的cancel对象现在将具有唯一的ID。感谢计数器变量（见上文）。

function cancel($obj){
    $obj.on('click', function() {
         console.log($(this).closest('tbody'))
         $(this).closest('tbody').fadeOut(2000); 
    });
}