在使用AJAX调用后,由于页面内容已经改变,页面中原本绑定的事件也可能会失效,导致函数无法正常工作。为了解决这个问题,我们可以使用事件委托的方式来绑定事件。
例如,在一个按钮被点击后进行AJAX调用,并通过回调函数重新渲染页面后,原本绑定在这个按钮上的事件可能会失效,代码如下:
$(function() {
$('#btn').click(function() {
$.ajax({
//...
success: function(data) {
//重新渲染页面
}
});
});
$('#link').click(function() {
//链接点击事件
});
});
此时,由于#btn
在重新渲染页面后已经不存在,所以绑定在它上面的事件也会失效。我们可以使用事件委托的方式,将事件绑定在它的父级元素上,以保证事件一直生效,代码如下:
$(function() {
$('#parent').on('click', '#btn', function() {
$.ajax({
//...
success: function(data) {
//重新渲染页面
}
});
});
$('#parent').on('click', '#link', function() {
//链接点击事件
});
});
这样,就可以通过委托事件的方式,确保事件一直有效,避免了由于页面改变导致的事件失效问题。
上一篇:Ajax调用后更改按钮中的文本
下一篇:AJAX调用后脚本无法正常运行