转载自:http://blog.csdn.net/xyq286654901/article/details/72687052
今天在做项目的时候遇到了一个问题,就是通过js动态绑定事件的问题。在网上收索了下,然后自己写了一个个很简单的DOM实验了一下!
1、jsp代码
- <body>
- <p>定义第一个添加按钮</p>
- <input type="button" value="第一个按钮" id="oneAdd"/>
- </br>
- </br>
- </br>
- <p>定义一个DIV</p>
- <div style="width: 400px;height: 150px;border:1px solid #000;" id="div">
- </div>
- </body>
2、js代码
- <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
- <script type="text/javascript">
- $(function(){
- //给添加按钮,首先使用click的方式
- $("#oneAdd").click(function(){
- //在div里面添加第二个按钮
- console.log("点击了第一个按钮")
- $("#div").html("<input type='button' value='第二个按钮' id='twoAdd' />");
- })
- //给第二个按钮一个添加事件,同样是使用click的方式
- //第一个方法
- /*$("#twoAdd").click(function(){
- console.log("点击了第二个按钮")
- })
- //第二个方法
- $("#twoAdd").on("click",function(){
- console.log("点击了第二个按钮")
- })*/
- //第三个方法
- $("#div").on("click","#twoAdd",function(){
- console.log($(this).attr("type"))
- //取消按钮一的点击事件
- $("#oneAdd").off("click");
- })
- })
- </script>
3、结果
点击第一个按钮可以正常触发cilck事件,
当启用方法一时,按钮无法正常触发click事件
当启用方法二时,按钮无法正常触发click事件
当启用方法三时,按钮可以正常触发click事件
4、总结
1、在页面初始化的时候已经给定固定的id时,cilck和onclick都可以正常使用;
2、当页面动态加载一个id时,使用click将失去作用,必须使用onclick才可以正常运行;
3、element.click()这种写法不支持给动态元素或样式绑定事件。支持给动态元素绑定事件的是.live()和.on()。live在jQquery1.7后就不推荐使用了。使用.on()时注意,on前面的元素必须在页面初始化的时候就存在静态页里面,这也是为什么方法而不能正常使用的原因。
另一种解释是:
在DOM加载的工程中 当加载到 按钮二的点击事件那里时 DOM中是找不到 twoAdd 这个节点的 所以你的第一个方法和第二个方法都是无效的 第三种方法是采用了事件委托的处理方式 DOM加载时先去找 id 为 div的这节点 当点击这个节点时 再去它下面找 twoAdd 这个节点