ajax分页 异步加载数据后 页面元素绑定的jQuery事件 js失效问题
ajax分页 异步加载数据,并将数据渲染到页面后,发现异步加载出来的html绑定的click事件失效。
解决这个问题的办法就是将jQuery的事件函数,换成DOM对象的事件函数。
原JQuery的click:
$('.content-block').click(function () {
// 执行的代码
// 执行的代码
// 执行的代码
});
此法异步加载分页数据,并渲染之后失效。
用Jquery中的$(document)的on方法绑定click事件
$(document).on('click', '.content-block', function() {
// 执行的代码
// 执行的代码
// 执行的代码
});
使用此法成功解决异步加载JS/Jquery失效问题。有些情况将ajax参数async设置为false也可以解决问题。
异步加载jquery事件不起作用的原因
.click(function(){}):
只能为页面现有的元素绑定点击事件;如果是动态生成的新的元素,是没有事件的。
$(document).on(“click”,“指定的元素”,function(){}):
将指定的事件绑定在document上,而动态添加的元素如果符合指定的元素,那就触发此事件。
以上。