最新文章
- MySQL中, group by 和 order by 一起使用会有排序问题,group by 和 order by 同时使用时要注意的地方
- Vue学习笔记(10) ——Vue组件中的data和methods
- Vue学习笔记(9) ——Vue组件创建的几种方式
- Vue学习笔记(8) ——Vue实例的生命周期
- Vue学习笔记(7) —— 过滤器 filter的基本使用
- Vue学习笔记(6) ——v-if指令和v-show指令
- Vue学习笔记(5) —— v-for指令和key属性
- Vue学习笔记(5) —— Vue中样式-class样式和style样式
- Vue学习笔记(4) —— v-model指令,双向数据绑定
- Vue学习笔记(3) —— Vue事件修饰符
关注我

在线咨询
x
有什么可以帮到你

点击咨询
jQuery中on('click')与click的区别
- 分类:WEB前端
- 时间:2017-11-29
- 共555人围观
简介以下是用于测试二者 jQuery中on('click')与click区别的代码
$(docuemnt).on('click', ".delete-on", function(){
$(this).parent().remove();
});
以下是用于测试二者 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(); });