如何理解jquery bind on事件

发布时间：2021-10-14 13:59:56 作者：iii
来源：亿速云阅读：185

这篇文章主要介绍“如何理解jquery bind on事件”，在日常操作中，相信很多人在如何理解jquery bind on事件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何理解jquery bind on事件”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>





<style type="text/css">

</style>
</head>

<body>
<div id="div1">
<a href="#">1111111111</a>
</div>
</body>

</html>
<script type="text/javascript" language="javascript">
//bind 根 on的区别自己认为bind 跟on的区别其实不大
//下边的代码测试要先把其他代码注释掉不然后绑定事件会影响前边绑定的事件
/*
* 最基础的应用
* 像下边这2中绑定方式如果后期添加到div1下边新的a标签新添加的a标签是没有click事件的
* 可以打开本页面点击1111111111 控制台会输出1111111111
* 点击新添加的222222 是没有反应的
* */
$("body #div1 a").bind("click", function() {
console.log($(this).html());
});
$("body #div1 a").on("click", function() {
console.log($(this).html());
});
$("#div1").append("<a href='#'>222222</a>");

/*
* 增强版
* bind可以传递参数到调用的方法例子如下
* */
$("body #div1 a").on("click", "我是参数我是参数！", function(data) {
//这里data.data 属性就是我是参数我是参数！
console.log(data.data);
});

/*
* 超级增强版
* on可以给未来标签添加事件
* 什么叫给未来标签添加事件比如说刚进来页面就一个a标签1111111111 我用on绑定了click事件
* 后来又动态添加了222222 这个a标签也会有click事件具体代码是这样实现的
*
* */
$("body #div1").on("click", "a", function(data) {
//这里data.data 属性就是我是参数我是参数！
console.log($(this).html());
});
$("#div1").append("<a href='#'>222222</a>");

/*
* 超级超级超级超级增强版
* on可以给未来标签添加事件而且还可以传递参数
*
* */
$("body #div1").on("click", "a", "我是参数 on也可以传递参数！", function(data) {
//这里data.data 属性就是我是参数我是参数！
console.log(data.data);
});
$("#div1").append("<a href='#'>222222</a>");
</script>http://www.fuke029.com

到此，关于“如何理解jquery bind on事件”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！

如何理解jquery bind on事件

相关阅读