jquery中的live、on、onclick、bind

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

qianyi168

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

阅读量822

点赞数 1

分类专栏：前端学习文章标签： jquery dom javascript live on

本文链接：https://blog.csdn.net/qianyiyiding/article/details/51607345

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Jquery中的事件绑定有三种方式：

onclick事件
onclick非常好理解，点击时候触发onclick函数中的代码执行

$("button").onclick(
  $("p").slideToggle();//显示和隐藏
);

bind函数
bind方法是为某个元素绑定一个事件，bind的方法只能给已经存在的DOM元素绑定事件，对于后面JS中新增加的元素是没有效果的，也即是说Jquery中的bind方法对DOM元素绑定事件之前，DOM元素一定必须先存在才能生效

$(document).ready(function(){
  $("p").bind("click",function(){
    alert("The paragraph was clicked.");
  });
});

live方法
live方法给元素绑定事件，与bind不同的是，live方法对DOM元素绑定的事件不同的是，不论DOM元素是后面添加进去的，也对中的html生效。比如有如下代码：

$("#clickMe").live("click",fn); 
$("div ul ").append("<div id='clickMe'></div>");

那么对于后面添加的DOM元素也是能够生效的。这就是和Bind方法的区别。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。
比如有如下代码，引用其他文档：可以用off来移除点击事件：

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").on("click",function(){
    $(this).css("background-color","pink");
  });
  $("button").click(function(){
    $("p").off("click");
  });
});
</script>
</head>
<body>

<p>Click this paragraph to change its background color.</p>
<p>Click the button below and then click on this paragraph (the click event is removed).</p>

<button>Remove the click event handler</button>

</body>
</html>

qianyi168

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery中的live、on、onclick、bind

Jquery中的事件绑定有三种方式：onclick事件 onclick非常好理解，点击时候触发onclick函数中的代码执行$("button").onclick( $("p").slideToggle();//显示和隐藏);bind函数 bind方法是为某个元素绑定一个事件，bind的方法只能给已经存在的DOM元素绑定事件，对于后面JS中新增加的元素是没有效果的，也即是说Jquer
复制链接

扫一扫

专栏目录