js修改id后无法触发事件

比如一个按钮的id是secondary_search
因为某个事件我把这个按钮的id换成了batch_secondary_search

但是这时候

$('#appointForm').on('click','#batch_secondary_search',function(){}

无法触发

触发的还是

$('.modal-footer #secondary_search').on('click',function(){

这是为啥

应该是在修改id之前，就已经绑定$('.modal-footer #secondary_search')的事件了，因为执行顺序的问题，是绑定click在前，修改id在后，所以依然能够触发。

首先呢，第一个代码，
$('#appointForm').on('click','#batch_secondary_search',function(){}，
给id为appointForm的注册事件，点击的时候如果点到了子元素带有id为batch_secondary_search就触发函数，所以你改了子元素的id，那点击的时候找不到这个id的子元素啦，不会触发了；
第二个代码，$('.modal-footer #secondary_search').on('click',function(){，
给.modal-footer #secondary_search注册事件，所以已经注册了，你即使改了id也还是注册了事件，点击还是触发

如下代码没有问题

<!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元素~~~

所以你的代码如我贴出的代码这样，就不会有问题~~

你再检查下代码的其他地方~~~

id值只是用于jq选择器，也就是说，对于jq来说，是根据这个id进行点击事件绑定，你改变id值的时候，click事件已经绑定了，那这id存在不存在，修改不修改， click事件都已经存在该元素上了

$('#batch_secondary_search').on('click',function(){}`请输入代码

可以直接给你所要添加的ID追加点击事件，为何还用到事件委托?

你是在什么场景下要用on来绑定事件呢？不能直接使用

$("#batch_secondary_search").click(function{....});

或

$("#batch_secondary_search").bind("click",function(){....});

【热门文章】