您的位置：首页 > Web前端 > JQuery

对 jquery bind on 事件的理解

2021-04-10 00:30 2236 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航