JqueryOn绑定事件方法介绍
jqueryon绑定事件方法介绍
1. 简介
(1) on()方法在被选及子元素上添加一个或多个事件处理程序
(2) 在jquery 版本1.7起，on()方法是bind(),live()和delegate()方法的新的替代品，该方法给api带来很多便利，简化了jquery代码库。
(3) 使用on()方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)
2. 目前了解到使用场景
(1) 使用ajax请求数据时使用。
(2) 对加载完页面之后的元素进行事件绑定。
3. 注意事项
(1) 你使用jquery追加的元素要在一个不会进行改变的父级之下，可以是document。
(2) 绑定有两种方式
① 单个事件绑定
1) $(“#id”).on(‘click’,function(){}) 把点击事件绑定到id为id的元素身上
2) $(“#id”).on(‘click’,’.div’,function(){}) 把点击事件绑定到id为id的子级元素类名为div的元素身上
② 多事件同时绑定到一个元素上
③ $(“.div”).on({
mouseover:function(){$(“body”).css(“background-color”,”red”)},
mouseout:function(){$(“body”).css(“background-color”,”yellow”);},
click:function(){$(“body”).css(“background-color”,”green”)}
})
4. 案例
<div class="entrust">
<button class="btn_class"> 测试 </button>
<button class="b_class"> 测试_测试 </button>
<div>
<button class="btn_id"> 测试1 </button>
<button class="b_id"> 测试_测试1 </button>
</div>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>entrust</title>
</head>
<body>
<div>
<button> 测试 </button>
<button> 测试-测试-测试 </button>
<div>
<button> 测试1 </button>
<button> 测试-测试buttona </button>
</div>
</div>
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script>
$(".oncase").on("click",".oncasebuttona",function(){
console.log(this.class,"测试—class-oncasebuttona");
});
$('.oncasebutton').click(function () {
console.log(this.class,"测试—class-oncasebutton")
});
$('.button').click(function () {
$('<button> 测试-button </button>').append();
});
$('.buttona').click(function () {
$("<button> 测试-测试buttona </button>").append();
});
</script>
</body>
</html>
推荐阅读
-
JqueryOn绑定事件方法介绍
-
vue绑定事件后获取绑定事件中的this方法
-
jQuery中的bind绑定事件与文本框改变事件的临时解决方法_jquery
-
jquery中移除了live()和die(),新版事件绑定on()和off()的方法详解
-
JQuery为页面Dom元素绑定事件及解除绑定方法
-
vue element-ui 绑定@keyup事件无效的解决方法
-
AngularJS实现给动态生成的元素绑定事件的方法
-
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
-
Jquery on方法绑定事件后执行多次
-
jQuery文本框(input textare)事件绑定方法教程_jquery