【异常处理】Ajax异步生成的内容Click控件事件失效

overme2个月前 (10-17)网页设计151
如摘要所述

公司内开发了一个小型服务网站,用于成员登陆数据和查询。点击查询按钮后,页面通过jquery ajax异步动态生成内容。由于管理需要,登陆的数据需要管理者审核。每条内容中添加了一个审核按钮,计划是点击审核按钮时执行Jquery代码控制弹窗。开发完成后,点击查询后,数据和按钮能正常显示,但是Click按钮没有反应。

开始以为Jquery代码有问题,通过一些简单的调试,发现Jquery的click事件都没有触发,当时给自己造成了些困扰,搜索整合了一些资料后,才解决该问题。(还是自己对实践执行机制了解不足)

开始的Click控件执行代码:

$(“.按钮的类”).click(function(){
        //此处执行Jquery代码,控制弹窗显示
});

以上述代码运行时,进入页面立即加载出来的数据,点击审核按钮时,审核框能正常显示。当时通过选择筛选条件后,点击查询按钮查出来的数据,点击审核按钮,无法进入JS代码执行。

因为开始网页加载时一同加载的审核元素,JQUERY是能定位到的。但是通过Ajax动态的修改了网页部分区域内容后,Click方法就失效了,无法定位到审核元素。

解决方法:
这时候需要使用on()方法,On()方法适用于当前元素和未来元素(比如通过脚本生成的元素),将子元素的事件绑定到父元素,子元素被点击后会冒泡到父元素,由父元素捕获事件并触发。

$(document).on(“click”,”.按钮的类”,function(){
        //此处执行Jquery代码,控制弹窗显示
});

通过以上方法,成功的解决了遇到的问题,希望能对你有帮助!

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。