今天在做项目的时候遇到了一个问题，就是通过js动态绑定事件的问题。在网上收索了下，然后自己写了一个个很简单的DOM实验了一下！
1、html代码
<body>
<p>定义第一个添加按钮</p>
<input type="button" value="第一个按钮" id="oneAdd"/>
</br>
</br>
</br>
<p>定义一个DIV</p>
<div 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前面的元素必须在页面初始化的时候就存在静态页里面，这也是为什么方法而不能正常使用的原因。
写在最后
最近经常有很多程序员朋友问我有没有什么学习资料，尤其是前端还有php的。因为本人是学全栈的，所以手里是有一些前端还有PHP全套视频学习资料。这些资料绝对比那些在群里漫天飞的资料强多了。相信看完这些，你绝对可以找到一份好工作！
为了感谢大家的支持，今天我在这里统一说下吧：
添加微信号：LqLq950518，就可以free领取上图价值3万元的全套视频学习资料！，一般人我不告诉他。
扫描下方二维码也可以哦
！！！
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
