click()、bind()、live()和delegate()方法
我之前使用click()比较多,又来因为网页内容需要前端生成用了live().有的时候使用click()和bind()分不清楚该怎么试用.查了很多资料.测试了很多次,自己明白了.
总结如下:代码注释很详细,感觉不用在分段写了.都写在一起了.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#">点击</a>
<div class="box" style="cursor:pointer;">live</div>
<div id="test"><a href="#">live支持链式编程吗?</a></div>
<script type="text/javascript" src="js/jquery-1-8-3.js"></script>
<script type="text/javascript">
$(function(){
$("<div class='box2' style='cursor:pointer;'>live</div>").appendTo("body");
});
$("a").click(function(){
console.log("click");
});
/***
*click()方法是bind()方法的一种简单方法.
* 在bind()中, jQuery所有JavaScript事件对象, 比如focus, mouseover, resize, mousemove和mouseout,都可以作为type参数传递进来的.
*/
var message = "left";
$("a").bind("click",{ msg: message }, function(e) {
console.log(e.data.msg);
return false;
});
var message = "right";
$("a").bind("contextmenu",{ msg: message }, function(e) { //contextmenu:鼠标右击与键盘的菜单触发键
console.log(e.data.msg);
return false;
});
/***
* 这样当我们左键单击<a>时，输出"left";当右键单击<a>时，输出"right".
*/ /***
* live()给所有匹配的元素附加一个时间处理函数, 即使这个元素是以后添加进来的也有效.
*/
$("div.box").bind("click", function() {
console.log("success bind");
}); /***
* 当点击class="box"为live时, 打印出success.
* 此时,如果有新元素添加进来,该如何操作?
* 这时, 当使用上边方法点击class为live的a标签时, 不会执行.
* 原因:这个元素是在调用bind()之后添加的, 而使用live方法使得在后边添加的元素也能够执行相应的事件.
*/
$("div.box2").live("click", function() {
console.log("success live");
});
/***
* live()方法不支持链式编程
*/
$("#test").children("a").live("mouseover", function() {
console.log("支持链式编程");//报错,不支持链式编程 Error: Syntax error, unrecognized expression: #test.children(a)
}); /***
* 上面这种写法并不会输出, 我们这个时候可以使用delegate()
*/
$("#test").delegate("a", "mouseover", function() {
console.log("delegate");
});
/***
* 这样就可以输出想要的结果.
*/
</script>
</body>
</html>
click()、bind()、live()和delegate()方法的更多相关文章
- jQuery方法区别:click() bind() live() delegate()区别
今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...
- jQuery方法区别(四)click() bind() live() delegate()区别
click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: $ ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...
- jQuery的.click,.bind,.unbind,.on,.off,.delegate,.undelegate
.click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要 ...
- Jquery揭秘系列：谈谈bind,one,live,delegate事件及实现
在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate等等. 我们先看看他们的定义,直接进入主题: bind( )方法用于将一个处理程 ...
- bind() live()和delegate 区别
Event bubbling (aka event propagation)冒泡 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们不人为的设置s ...
- jQuery 请指出'.bind()','.live()'和'.delegate()'的区别
http://kb.cnblogs.com/page/94469/网上好多类似的 简言之bind可以绑定页面上已有的,live和delegate可以绑定到还未存在于页面中的元素之上.delegate又 ...
- Jquery揭秘系列：谈谈bind,one,live,delegate,on事件及实现
在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate,on等等. on() jQuery事件绑定.on()简要概述及应用 看源码发现 ...
- Jquery中bind(), live(), on(), delegate()四种注册事件的优缺点，建议使用on（）
jquery中注册的事件,注册事件很容易理解偏差,叫法不一样.我第一反应就是如何添加事件,使用onclick之类的,暂时不讨论js注册事件的方法. 也看到园内前辈写过相关的帖子,但不是很详细,我找到了 ...
- jQuery中的bind(), live(), on(), delegate()
当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...
随机推荐
- checkpoint process vs writer process vs wal writer process
开始 我目前的理解是: 如果我执行了一条SQL文,那么 先是相关数据写到 wal buffer里, 然后再写到 data buffer(shared_buffer)里. 这之后, 由于wal wr ...
- Drupal views中实现两列布局
Views中的format有table,grid,unformatted list等,但是没有2 columns等选项. 如果要达到如下效果: 左侧一列有title,content,右侧一列image ...
- xgboost算法教程(两种使用方法)
标签: xgboost 作者:炼己者 ------ 欢迎大家访问我的简书以及我的博客 本博客所有内容以学习.研究和分享为主,如需转载,请联系本人,标明作者和出处,并且是非商业用途,谢谢! ------ ...
- 提取oracle awr报告
做性能测试时有时需要分析sql的执行情况,以找出需要优化的sql,oracle数据库就提供了很好的数据库状态和sql执行情况的监控平台,数据库的监控平台可以时时的监控数据库的状态,同时还可以取监控的时 ...
- 三、利用EnterpriseFrameWork快速开发Winform系统（C/S）
EnterpriseFrameWork框架实例源代码下载: 实例下载 上一章讲解了开发Web系统的详细步骤,以书籍的管理作实例实现对书籍的增.删.改.查功能,本章接着上面的实例继续补充用Winform ...
- 用原生JS实现一个轮播（包含全部代码和详细思路）
在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+cs ...
- centos 7 安装和基本配置
U盘安装centos 7 还是官方文档最准确. 下载centos https://docs.centos.org/en-US/centos/install-guide/downloading/ 制作安 ...
- linux命令提示符设置
变成绿色 [root@localhost /usr/local]#vim /root/.bashrc # .bashrc # User specific aliases and functions a ...
- selenium 列表循环定位方法。
话不多说,直接上代码. 就是循环第一层,然后拼接,然后继续循环,继续屏接,任你多少层都不是问题. def c_select(self, values, text): """ ...
- leetcode26_C++删除排序数组中的重复项
给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例 1 ...