【JQuery】ajax分页 异步加载数据后 页面元素绑定的jQuery事件 js失效问题

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上，而动态添加的元素如果符合指定的元素，那就触发此事件。

---

以上。