文档章节

jquery事件绑定丢失

cyper
 cyper
发布于 2015/12/01 22:27
字数 697
阅读 64
收藏 0
点赞 0
评论 0

##出现问题的代码

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

	<meta charset="utf-8">
	<title>JS Bin</title>
	
	
</head>
<body>
	<script>
		var el = $("<div>lol</div>");

		el.click(function() {
			alert("hi"); 
		});

		$("body").html(el);
		$("body").html(el);

	</script>
</body>
</html>

点击页面上的lol。。并不会弹出alert框架,这是为什么??

##解决

原文:http://tbranyen.com/post/missing-jquery-events-while-rendering

While fixing some bugs within my Backbone.LayoutManager plugin, I found an odd behavior in the way I encouraged users to attach a rendered layout into the DOM. Since you can reuse a layout and it's simply a DIV node created by Backbone, I figured it was sufficient to simply have a user call jQuery's html method to inject it into the correct container.

An example of what that code looks like:

// A callback function would fire with a DOM Node
callback(function(domNode) {
  $("body").html(domNode);
});

This code looks completely valid and not likely to cause any immediate problems, however this is not the case. The issue is that all events would be removed upon a second render. So the first call to $("body").html(el) would work exactly as expected with all events functioning, but the second call to $("body").html(el) would result in no events firing.

I brought this issue to the attention of jQuery committer Dave Methvin who insisted that this was not a bug and that inserting a DOM element into the DOM using the jQuery html function was not a supported signature in the API.

This was confusing to me as I have always seen and used the html function in this way. After learning from Dave that I should be using $("body").empty().append(el), I went back to my code and implemented swapping using empty.

Unfortunately, no dice.

The events were still disappearing, so I made a reduced test case that looked something like this:

var el = $("<div>lol</div>");
 
el.click(function() {
   alert("hi"); 
});
 
$("body").empty().append(el);
$("body").empty().append(el);

Since the following code yields missing events, this proved to me that something was happening inside the empty method. Sure enough digging into that function yields the following code:

// Remove element nodes and prevent memory leaks
if ( elem.nodeType === 1 ) {
  jQuery.cleanData( elem.getElementsByTagName("*") );
}

The call to jQuery.cleanData removes all events from the element, in this case the "body" element. Since this is a shared reference to the exact same DOM node, that means when you re-attach to the DOM a second time it's not going to get it's events back.

Problem detected and understood, but how to fix?

Luckily the fix is really simple and is now implemented inside of the LayoutManager plugin. Since the call to empty or html only remove events from elements inside the DOM we can easily "detach" using the jQuery detach method in between renders. The updated working code from the reduced test case looks like this:

var el = $( "<div>lol</div>");
 
el.click( function() {
   alert( "hi"); 
});
 
$( "body").empty().append(el);
el.detach();
$( "body").empty().append(el);

This may be a very obvious problem and solution to many developers, but it bit me and I've talked to many other developers lately who have been having this same issue while using Backbone.js. It may be that many client side developers do not reuse the same DOM node, avoiding this issue.

##评论中的进一步解释: detach works because it removes the element from the DOM completely, but retains any data set on it by jQuery, which includes events. Since its removed from the DOM, empty doesn't see the element and doesn't remove the events. If you used remove instead of detach events would be removed there as well.

© 著作权归作者所有

共有 人打赏支持
cyper

cyper

粉丝 57
博文 618
码字总数 143161
作品 0
武汉
前端工程师
javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

3个简单的事情,使你的jQuery代码变得更加棒

     jQuery是现存最流行的(如果不是最多的)JavaScript库之一,并且大量的人使用它来做一些令人惊叹的事情。就个人而言,jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白...

webstack前端栈 ⋅ 04/14 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

JavaScript 的 this 指向问题深度解析

JavaScript中的this指向问题有很多博客在解释,仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题,所以我不得不将关于前端构建技术的交流会延长了半个时候讨论this的问题。 与我们...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

Jquery实现京东tab切图

主要是用jquery实现tab切换,显示不同的内容。也可以用原生js实现,但是实现方式比较繁琐,这里暂时不写原生js实现。jquery相对代码少而且易于理解。 这里用了三种方式实装,在写的时候,发现...

Mrs_CoCo ⋅ 05/07 ⋅ 0

写的一个轻量级javascript框架的设计模式

公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可以轻松...

thinkyoung ⋅ 2014/12/05 ⋅ 0

JavaWeb04-HTML篇笔记(五)

1.1 案例五:下拉列表的左右选择:1.1.1 需求: 在分类的修改的页面中,有某个分类下的所属的商品的信息.可以对这些商品信息进行选择. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的选择器】 1.1....

我是小谷粒 ⋅ 05/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 14分钟前 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

楠木楠 ⋅ 26分钟前 ⋅ 0

Python 数电表格格式化 xlutils xlwt xlrd的使用

需要安装 xlutils xlwt xlrd 格式化前 格式化后 代码 先copy读取的表格,然后按照一定的规则修改,将昵称中的学号提取出来替换昵称即可 from xlrd import open_workbookfrom xlutils.copy ...

阿豪boy ⋅ 56分钟前 ⋅ 0

面试题:使用rand5()生成rand7()

前言 读研究生这3 年,思维与本科相比变化挺大的,这几年除了看论文、设计方案,更重要的是学会注重先思考、再实现,感觉更加成熟吧,不再像个小P孩,人年轻时总会心高气傲。有1 道面试题:给...

初雪之音 ⋅ 56分钟前 ⋅ 0

Docker Toolbox Looks like something went wrong

Docker Toolbox 重新安装后提示错误:Looks like something went wrong in step ´Checking if machine default exists´ 控制面板-->程序与应用-->启用或关闭windows功能:找到Hyper-V,如果处......

随你疯 ⋅ 今天 ⋅ 0

Guacamole 远程桌面

本文将Apache的guacamole服务的部署和应用,http://guacamole.apache.org/doc/gug/ 该链接下有全部相关知识的英文文档,如果水平ok,可以去这里仔细查看。 一、简介 Apache Guacamole 是无客...

千里明月 ⋅ 今天 ⋅ 0

nagios 安装

Nagios简介:监控网络并排除网络故障的工具:nagios,Ntop,OpenVAS,OCS,OSSIM等开源监控工具。 可以实现对网络上的服务器进行全面的监控,包括服务(apache、mysql、ntp、ftp、disk、qmail和h...

寰宇01 ⋅ 今天 ⋅ 0

AngularDart注意事项

默认情况下创建Dart项目应出现以下列表: 有时会因为不知明的原因导致列表项缺失: 此时可以通过以下步骤解决: 1.创建项目涉及到的包:stagehand 2.执行pub global activate stagehand或pub...

scooplol ⋅ 今天 ⋅ 0

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部