当使用Ajax请求时,动态生成的HTML元素上的点击事件会失效,因为这些元素在页面加载时还不存在,所以也没有点击事件绑定。
这种情况的解决方法是使用事件委托。即将事件绑定到已经存在于DOM树上的父元素上,再通过事件冒泡机制,让父元素代理子元素上的事件。
示例代码:
HTML部分:
JS部分:
$('body').on('click', '#child', function(){
//响应事件的代码
});
通过这种方式绑定事件,无论是Ajax请求后动态生成的元素,还是页面初始就存在的元素,都会受到事件响应。