使用js动态添加点击事件时,click与onclick的区别
2018-01-10 09:40
766 查看
今天在做项目的时候遇到了一个问题,就是通过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前面的元素必须在页面初始化的时候就存在静态页里面,这也是为什么方法而不能正常使用的原因。
5、参考
一、http://blog.csdn.net/webzhuce/article/details/53981556
二、http://blog.csdn.net/jalon2015/article/details/46535777
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前面的元素必须在页面初始化的时候就存在静态页里面,这也是为什么方法而不能正常使用的原因。
5、参考
一、http://blog.csdn.net/webzhuce/article/details/53981556
二、http://blog.csdn.net/jalon2015/article/details/46535777
<div class="readall_box csdn-tracking-statistics tracking-click readall_box_nobg" data-mod="popu_596" style="display: none;"> <div class="read_more_mask"></div> <a class="btn btn-large btn-gray-fred read_more_btn" target="_self">阅读全文</a> </div> <div id="digg" articleid="72687052"> <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();"> <dt>顶</dt> <dd>1</dd> </dl> <dl id="btnBury" class="digg digg_enable" onclick="btnburya();"> <dt>踩</dt> <dd>1</dd> </dl> </div> <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);"> </a> </div> <div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);"> </a></div> <script type="text/javascript"> function btndigga() { $(".tracking-ad[data-mod='popu_222'] a").click(); } function btnburya() { $(".tracking-ad[data-mod='popu_223'] a").click(); } </script>
相关文章推荐
- 使用js动态添加点击事件时,click与onclick的区别
- 使用js动态添加点击事件时,click与onclick的区别
- 【Unity】UGUI怎么动态的添加按钮的OnClick点击事件
- js-动态添加li、option,并且添加其点击事件
- jquery on() 给js动态新添加的元素 绑定的点击事件。
- 使用javascript动态添加onclick事件,
- ugui使用代码动态添加Button.OnClick()事件
- uGUI使用代码动态添加Button.OnClick()事件
- js动态添加点击事件常见错误
- JS为循环动态生成的节点添加点击事件
- js动态append添加的节点,点击事件无效
- 使用javascript动态添加onclick事件
- 关于js中的onclick事件和JQuery中的click方法以及on方法事件的详解以及区别
- 【学习3】Cocos2d-x 3.x中使用物理引擎动态添加元素(点击事件)
- js动态添加带参数的点击事件
- js动态添加onclick事件可传参数与不传参数
- js动态添加onclick事件,传参数与不传参数
- JS为循环动态生成的节点添加点击事件
- js中的click和onclick事件区别