jquery中的live()、on()、bind()的比较

最新推荐文章于 2023-11-29 23:05:07 发布

2012013977

最新推荐文章于 2023-11-29 23:05:07 发布

阅读量350

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/nianzhi1202/article/details/52530089

版权

js 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

今天用append()方法追加一段代码到一个div中，想实现点击这段代码中的一个div弹出一个框的效果，但是我使用click和on绑定事件都没有实现，结果百度一下才知道，live()可以完成，就百度了一下live()的用法，发表一下也方便自己看：

1.通过 live()方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）例如：

$("div").live("click", function() {
alert("获取到了");
});

2.jquery 1.7+之后用on代替live,on() 方法在被选元素及子元素上添加一个或多个事件处理程序(on是其它几种事件的整合，使用中推荐使用on)

对于append追加的未来元素：

$("#one").on("click",function(data){
alert("这样是获取不到的");
});

$("body").on("click","#one",function(data){
alert("这样才能获取到");
});

bind()对于未来元素的绑定不能用bind()，它是直接绑定在当前元素上

把今天遇到的ajax中data的格式也记录一下：
1.data: "name=John&location=Boston",//第一种方式传参
2.data: {name:"John",location:"Boston"} //第二种方式传参
第一种方式当参数中包含&符号时就有可能出现问题，个人认为第二种方式比较好用，当然如果是get方式传值，也可以在url中直接传参数，也就不用data了

后追加：

<body>
<div class="btn-area"></div>
<button class="add">add</button>
<script>
$(".add").click(function(){
$(".btn-area").append("<button class='test-btn'>test button</button>");
});
$('.test-btn').on('click',function(){
alert('123');
})//对于动态追加的元素这样使用on是不能触发的，应该是下面：
$(".btn-area").on("click",".test-btn",function(){
console.log("test button .....");
});
</script>
</body>