2017-11-29 jQuery中on('click')与click的区别
您现在的位置是: 首页 > WEB前端 > jQuery中on('click')与click的区别
389次阅读
以下是用于测试二者 jQuery中on('click')与click区别的代码。
一、HTML页面
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div> <h1>展示jQuery中on()和click()的区别</h1> </div> <div> <span>点击生成新按钮。NewOn生成的Delete按钮行为用on()实现，NewClick生成的Delete按钮行为用click()实现。</span> </div> <div class="test"> <button class="new" id="new-on">NewOn</button> <button class="new" id="new-click">NewClick</button> <ul class="li"> <li>原先的HTML元素on<button class="delete-on">Delete</button></li> <li>原先的HTML元素click<button class="delete-click">Delete</button></li> </ul> </div> </body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> // 以下 二、js代码 </script> </html>
二、js代码
<script>
$(document).ready(function () {
// 动态添加的HTML元素on
$("#new-on").click(function(){
$(".li").append('<li>动态添加的HTML元素on<button class="delete-on">delete-on</button></li>');
});
// 动态添加的HTML元素click
$("#new-click").click(function(){
$(".li").append('<li>动态添加的HTML元素click<button class="delete-click">delete-click</button></li>');
});
// 原来页面的dom，可以删除
$(".delete").click(function(){
$(this).parent().remove();
});
// 后来页面生成的dom，不可以删除
$(".li").on('click', ".delete-on", function(){
$(this).parent().remove();
});
// 后来而来生成的dom，无法删除
$(".delete-click").click(function(){
$(this).parent().remove();
});
});
</script>
三、说明
1. 页面加载后，点击NewOn和NewClick按钮
2. 再尝试点击原来页面的几个删除按钮，也就是Delete按钮
四、现象
原先的HTML元素点击其身后的Delete按钮就会被删除。而动态添加的HTML元素，使用click()这种写法，点击Delete按钮无法删除；使用on('click')方式可以。
五、原因
element.click()这种写法不支持给动态元素或样式绑定事件。
六、注意点
使用.on('click')时注意，on前面的元素必须在页面加载的时候就存在DOM里面，如果没有，可以使用document，如
$(document).on('click', ".delete-on", function(){
$(this).parent().remove();
});