js修改id后无法触发事件
比如一个按钮的id是secondary_search
因为某个事件我把这个按钮的id换成了batch_secondary_search
但是这时候
$('#appointForm').on('click','#batch_secondary_search',function(){}
无法触发
触发的还是
$('.modal-footer #secondary_search').on('click',function(){
这是为啥
写回答
-
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="script/jquery_2_1_3/jquery-2.1.3.min.js"></script> <script> $(function(){ $('.modal-footer #secondary_search').on('click',function(){ console.log('#secondary_search click'); }); $('#appointForm ').on('click','#batch_secondary_search',function(){ console.log('#batch_secondary_search click'); }); $('#changeButton').on('click',function(){ console.log('changeButton'); $('#secondary_search').attr("id","batch_secondary_search"); }); }); </script> </head> <body> <from id="appointForm" onsubmit="javascript:return false;"> <div class="modal-footer"> <button id="secondary_search">ButtonA</button> </div> <button id="changeButton">Change[ButtonA]ID</button> </from> </body> </html>在修改ID前点击按钮
#secondary_search(ButtonA)，将输出#secondary_search click
点击#changeButton按钮，修改原#secondary_search(ButtonA)按钮的ID为batch_secondary_search后，
再点击ButtonA,将输出#secondary_search click和#batch_secondary_search click我们看到原绑定到ButtonA事件一并被触发了，这是因为
$('.modal-footer #secondary_search').on('click'执行后将click的回调函数绑定到ButtonA这个DOM元素上了，只要这个DOM元素存在，无论其属性怎么变化，只要可被点击，click回到函数就会被执行而
$('#appointForm ').on('click','#batch_secondary_search'事件添加到#appointForm这个DOM元素上，利用事件冒泡机制，当#appointForm这个DOM元素下的子元素发生点击事件后,回去判断当前冒泡到的DOM元素是否符合#batch_secondary_search这个selector的要求，如果符合，绑定的事件回调函数就被执行,如果不符合，就会跳过这个DOM元素~~~2019-07-17 19:21:16赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
