Click事件不适用于动态生成的元素
这个问题在这里已经有了答案：
您使用的click()绑定称为“直接”绑定，它只会将处理程序附加到已存在的元素。 它不会被绑定到未来创建的元素上。 要做到这一点，你必须使用on()创建一个“委托”绑定。
委托事件的优点是它们可以处理来自稍后添加到文档中的后代元素的事件。
资源
这就是你要找的东西：
var counter = 0;
$("button").click(function() {
$("h2").append("<p class='test'>click me " + (++counter) + "</p>")
});
// With on():
$("h2").on("click", "p.test", function(){
alert($(this).text());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2></h2>
<button>generate new element</button> 使用带有委派事件的.on()方法
$('#staticParent').on('click', '.dynamicElement', function() {
// Do something on an existent or future .dynamicElement
});
.on()方法允许您将任何所需的事件处理程序委托给：
当前元素或将来添加到DOM的未来元素。
PS：不要使用.live() ！ 从jQuery 1.7+中.live()方法已被弃用。
原因：
在jQuery中，Click（） - 仅在元素已存在于html代码中时附加事件处理程序。
它不会考虑在页面加载后动态创建的新元素（Future元素）。
动态元素是通过javascript或jquery（而不是html）创建的 。
所以点击事件不会触发。
解答：
为了克服这个问题，我们应该使用on（）函数。
delegate（），live（）和on（）函数优于DOM元素。
就可以触发这两个现有的元素，以及未来的元素。
on可以考虑整个页面中都存在的元素。
不推荐使用delegate（），live（）函数（不要使用这些函数）。
您应该使用on函数在动态创建的（未来）元素上触发事件。
从$（document）.ready中删除代码：
$(".test").click(function(){
alert();
});
变成：
$(document).on('click','.test',function(){
alert('Clicked');
});
上一篇: Click event doesn't work on dynamically generated elements