javascript - js修改id后无法触发事件-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

javascript - js修改id后无法触发事件

迷茫 2017-04-10 17:28:53

[JavaScript讨论组]

521

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

但是这时候

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

无法触发

触发的还是

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

这是为啥

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(6)

ringa_lee2017-04-10 17:30:53 6楼

如下代码没有问题

<!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;">
    <p class="modal-footer">
    <button id="secondary_search">ButtonA</button>

    </p>
    <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元素~~~

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

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

赞 +0

添加回复

黄舟2017-04-10 17:30:53 5楼

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

赞 +0

添加回复

PHP中文网2017-04-10 17:30:53 4楼

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

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

赞 +0

添加回复

天蓬老师2017-04-10 17:30:53 3楼

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

赞 +0

添加回复

伊谢尔伦2017-04-10 17:30:53 2楼

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

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

或

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

赞 +0

添加回复

黄舟2017-04-10 17:30:53 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>