问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js修改id后无法触发事件

头像
满月微光
    57944958

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

    但是这时候

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

    无法触发

    触发的还是

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

    这是为啥

    jqueryjavascript
    阅读 7.9k
    6 个回答
    得票最新
    头像
    kikong
      19.1k31320
      ✓ 已被采纳

      如下代码没有问题

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

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

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

      头像
      Ash_Shen
        2.8k1414

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

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

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

          头像
          Kathy_Miao
            5814

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

            头像
            杭州程序员张张
              11.8k41045

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

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

              或

              $("#batch_secondary_search").bind("click",function(){....});
              头像
              天然空
                30741626

                首先呢，第一个代码，
                $('#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也还是注册了事件，点击还是触发

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题