您好,欢迎来到站长目录(28sn.com)!


对 jquery bind on 事件的理解

来源:网络整理 浏览:290次 时间:2022-01-22

<!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>
<!--<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>-->
<!--<script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>-->
<!--<script src="http://libs.baidu.com/jquery/1.4.4/jquery.min.js"></script>-->
<!--<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>-->
<!--<script src="http://libs.baidu.com/jquery/1.2.3/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>

推荐站点

  • 我爱发烧音乐我爱发烧音乐

    我爱发烧音乐囊括了从流行音乐到古典音乐多个类型的音乐作品,专栏推荐最新的音乐,提供音乐排名榜单!可供免费线上收听音乐,歌曲流畅,音效极佳! 网站提供的钢琴以及二胡专栏,可供收听者,陶冶情操,改善心情,是难得的轻音乐典藏!

    www.520fs.com
  • 世纪音乐网世纪音乐网

    世纪音乐网是专业的在线音乐试听MP3下载网站。歌曲总计30余万首,收录了网上最新歌曲和流行音乐,DJ舞曲,非主流音乐,经典老歌,劲舞团歌曲,搞笑歌曲,儿童歌曲,英文歌曲等。是您上网听歌的最佳网站。

    www.ssjj.com
  • 杭州网杭州网

      杭州网是杭州地区唯一的新闻门户网站,由中共杭州市委宣传部、杭州日报报业集团和杭州广播电视集团共同组建的杭州网络传媒有限公司运营。

    www.hangzhou.com.cn
  • 深圳在线深圳在线

      深圳在线 www.szol.net是深圳本地最大、最早的地方生活资讯网站之一,网站名“深圳在线www.szol.net”由南方报业传媒集团编辑委员会总编辑、南方日报社总编辑、南方都市报总编辑、南方书画院名誉院长王春芙亲笔题名,深圳在线www.szol.net团队与深圳热线www.szonline.net、奥一网www.oeeee.com都源于全国最早成立于1996年的知名网络公司——深圳万用网。

    www.szol.net
  • 今题网今题网

     今题网- 中国领先的社区服务网,提供社区服务, 在线交友和商家推广服务,于2004年创建上线,公司现有员工超过百名。今题网自成立以来,凭借其独特的定位和丰富的社区交友功能, 凭借其团队超强的搜索引擎优化技术吸引超过千万的用户成为今题网的注册会员。

    www.jinti.com

鄂公网安备 42062502000001号