对 jquery bind on 事件的理解
来源:互联网 发布:ug自动编程 编辑:程序博客网 时间:2024/04/29 21:12
<!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>
<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>
阅读全文
0 0
- 对 jquery bind on 事件的理解
- jQuery事件:bind、delegate、on的区别
- jQuery事件:bind、delegate、on的区别
- jQuery事件:bind、delegate、on的区别
- jQuery事件:bind、delegate、on的区别
- 对jquery中on,bind,delegate,live添加事件的总结
- jquery的bind跟on绑定事件的区别
- jquery的事件委托-bind,live,delegate,on的区别
- jquery的bind跟on绑定事件的区别
- jquery的bind跟on绑定事件的区别
- jquery的bind跟on绑定事件的区别
- jQuery的事件处理方法介绍 - bind(),live(),delegate(),on()
- jQuery的事件处理方法介绍 - bind(),live(),delegate(),on()
- JQuery事件绑定函数:on()与bind()的差别
- jQuery事件绑定bind、live、delegate和on的区别
- Jquery事件绑定函数:on和bind的区别
- jquery关于on click事件的理解
- Jquery中的bind(),on()绑定事件方式
- C++11 图说VS2013下的引用叠加规则和模板参数类型推导规则
- squid
- 总结一下遇到的各种核函数~
- C++string中用于查找的find系列函数浅析
- PHP那些琐碎的知识点
- 对 jquery bind on 事件的理解
- hadoop 安装与环境搭建
- C++string中有关字符串内容修改和替换的函数浅析
- 数据库存储与文件存储
- 理解RxJava,RxAndroid的观察者模式
- bond
- 基于深度学习的车辆信息识别(一):车辆颜色识别
- 用switch添加多个button的onclicklistener
- c++中的静态变量,静态指针,静态类指针,静态类对象使用和原理