jQuery.empty() Kills Event Binding On Persistent Nodes

Posted October 23, 2007 at 6:36 PM

Tags: Javascript / DHTML

I am not sure if this is a bug, a gross misunderstanding on my part, or just a side effect of the architecture of the document object model (DOM), but from what I can tell, using jQuery's .empty() method seems to unbind any event handlers to child nodes, even when they have persistent pointers. To show you what I am talking about, take a look at this code:

 Launch code in new window » Download code as text file »

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html>
  • <head>
  • <title>jQuery Test Binding</title>
  •  
  • <!-- Linked scripts. -->
  • <script type="text/javascript" src="jquery-latest.pack.js"></script>
  • <script type="text/javascript">
  •  
  • $(
  • function(){
  • var jP = $( "p:first" );
  • var jSpan = $( "span:first" );
  • var jAdd = $( "button.add" );
  • var jRemove = $( "button.remove" );
  •  
  •  
  • function Add(){
  • jP.append( jSpan );
  • }
  •  
  • function Remove(){
  • jP.empty();
  • }
  •  
  • function Bold(){
  • jSpan.css( "font-weight", 800 );
  • }
  •  
  • function Unbold(){
  • jSpan.css( "font-weight", 400 );
  • }
  •  
  •  
  • // Add the event binding on the SPAN so that
  • // if you click it, it will remove itself from
  • // the parent container (actually, the parent
  • // will jump empty. Additionally, hook up the
  • // hover (mouse over / out ) to bold text.
  • jSpan
  • .click( Remove )
  • .hover( Bold, Unbold )
  • ;
  •  
  • // Hook up the add button to add the SPAN back
  • // into the paragraph.
  • jAdd.click( Add );
  •  
  • // Hook up the Remove button to clearn the P.
  • jRemove.click( Remove );
  •  
  • }
  • );
  •  
  • </script>
  • </head>
  • <body>
  •  
  • <form>
  •  
  • <p>
  • <span>Click To Remove</span>
  • </p>
  •  
  • <button type="button" class="add">
  • Add
  • </button>
  •  
  • <button type="button" class="remove">
  • Remove
  • </button>
  •  
  • </form>
  •  
  • </body>
  • </html>

Here, when the DOM loads, we are creating a jQuery stack containing the SPAN tag. We are then binding a click event and a hover event (mouse over / mouse out) such that if you click on the span, it causes the parent element to clear itself and if you hover over it, it bolds on the mouse over and unbolds on the mouse out.

Take a look at the Online Demo here.

This works great when the script first fires. However, once the P tag is cleared, taking the SPAN out of the document object model, all event handlers seem to unbind from the nested SPAN tag, even though the SPAN node continues to exist via the pointer, jSpan. Furthermore, you can see that the SPAN node persists because you can hit the Add button to add that jQuery stack back into the P tag using the .append() method. When added back in, the CSS styles persist (it will be bold if you clicked the original SPAN), which is what I would expect.

This is driving me crazy because I simply don't understand why the event handlers unbind even when the bound node continues to persist? The only way I can figure out how to get around this is to re-bind the event handler before I add the SPAN back into the document object model:

 Launch code in new window » Download code as text file »

  • function Add(){
  • // Rebind the SPAN methods.
  • jSpan
  • .click( Remove )
  • .hover( Bold, Unbold )
  • ;
  •  
  • // Add the Span back in.
  • jP.append( jSpan );
  • }

Take a look at the Online Demo of that page here.

This works, but it seems very ganky. I think I should be able set-and-forget event bindings? Thoughts / tips??

Download Code Snippet ZIP File

Post Comment  |  Ask Ben  |  Permalink  |  Print Page



Learning ColdFusion 9 - ColdFusion 9 tutorials, samples, examples, demos

Reader Comments

Oct 23, 2007 at 8:04 PM // reply »
40 Comments

Have you seen the live jQuery plugin? It's really awesome. Rather than BIND the events, you bind them with the live jQuery method. That way, when new nodes come and go, they all get the right stuff.

http://jquery.com/plugins/project/livequery


Oct 23, 2007 at 11:22 PM // reply »
40 Comments

I think I might see the problem... This code runs before you attach the events:

var jSpan = $( "span:first" );

And when you actually "attach" the events you are operating on the DOM using the jQuery object jSpan, but you aren't capturing the stuff that has now been added to the DOM (the click and hover events).

Instead of:

jSpan
.click( Remove )
.hover( Bold, Unbold )
;

Could you try this?:

jSpan = jSpan
.click( Remove )
.hover( Bold, Unbold )
;

Also as Glen suggested have a look at liveQuery, it's a pretty cool plugin :)


Oct 24, 2007 at 7:24 AM // reply »
6,516 Comments

@Justin,

Good thought, but that doesn't work either. I do not believe that it should matter. DOM elements are passed around by reference, not by value. Therefore a jQuery stack that composes a DOM element will contain the same pointers as the one that added the event bindings.

@Glen,

LiveQuery looks very interesting. I got the "click" example to work, but it looks like it doesn't support "hover" binding. Before I would consider using this, however, I want to understand why my code is not working, otherwise, I won't even know what I am fixing.


Oct 24, 2007 at 7:24 AM // reply »
6,516 Comments

Also, it looks like LiveQuery doesn't work with jQuery 1.2, but when I downgraded to 1.1.3, it worked.


Oct 24, 2007 at 8:58 AM // reply »
111 Comments

@Ben:

This was a change in v2:
http://dev.jquery.com/changeset/3159

This change was done to prevent memory leaks. What happens if is if the element is no longer in the DOM, it removes the events so that the browser doesn't leak memory.

Generally when you're using the remove() or empty() you're really want to "kill" the elements. If you just want to them not to be shown, use a method like hide().

If for some reason hide() doesn't work for you, then you could store a copy of the nodes in an element that's hidden--that way the events aren't removed.


Oct 24, 2007 at 9:07 AM // reply »
6,516 Comments

@Dan,

That sounds valid (their reason for removing the event bindings). My problem was that I was building a plug-in that was re-ordering the nodes in a container. To do this, it would pull all the nodes out, shuffle them, and then re-append them to the container.

It worked because all the elements were "float: left". I have updated the plug-in so that the elements are absolutely positioned and to shuffle, I am merely changing the "top" and "left" css. The works for my scenario since the shuffling is a visual effect, not a DOM-related affect.

Still, I wonder if there is a way to swap DOM nodes without killing the event bindings. Looking at the link you sent me (how on earth did you even find that link ???) it looks like you can hack it by keeping hidden containers and then just append items to it (via appendTo()), but this seems kludgy. Oh well, I guess it needs to be that way.

Thanks for the great tip.


Oct 1, 2009 at 1:09 PM // reply »
1 Comments

Hi,

I had a similar problem, but didn't want to refactor too much, so I kept looking.

This lead me to find jQuery.live() which was added in 1.3.x.

http://docs.jquery.com/Events/live

But this blog/article made me ask Google better questions ;)

Thanks

- Nicolai


Oct 1, 2009 at 1:31 PM // reply »
6,516 Comments

@Nicolai,

Yeah, the Live() event is definitely interesting. I've only played around with it a bit.


Post Comment  |  Ask Ben

Recent Blog Comments
Nov 20, 2009 at 11:32 PM
Five Months Without Hungarian Notation And I'm Loving It
I've used headless camel case for years for not only ColdFusion variables, but also SQL tables and fields... pretty much everything involving code. I also subscribe to the "don't abbreviate and clea ... read »
Nov 20, 2009 at 11:00 PM
Five Months Without Hungarian Notation And I'm Loving It
@Marcel, Yeah, I always err on the side of longer but more readable variable names. As for the camel casing of CF methods and the headless camel casing of custom items, I get around this by always ... read »
Nov 20, 2009 at 10:56 PM
Five Months Without Hungarian Notation And I'm Loving It
I use the following and love it: my.namespace.MyComponents.functionMethodsOrUDF() CONSTANT_VALUES_OR_PROPERTIES One thing I always try is to CamelCaseBuiltInColdFusionFunctions() so others can tell ... read »
Nov 20, 2009 at 5:38 PM
Learning ColdFusion 8: CFImage Part I - Reading And Writing Images
Hi Ben, Great article. I've been looking around to see if ColdFusion image engine can programatically create the following "wrap around" effect: http://www.creativepro.com/article/photoshop-s-she ... read »
Nov 20, 2009 at 5:35 PM
Maintaining ColdFusion Sessions Across SMS Text Message Requests Without Cookies
@Dave: I talked to Gert he suggested: <cfhttp method="get" url="http://{some cf website}" result="stuff" addtoken="yes" /> Note the addition of cfhttp attribute addtoken. That should persist y ... read »
Nov 20, 2009 at 5:23 PM
Maintaining ColdFusion Sessions Across SMS Text Message Requests Without Cookies
@Todd, Ahh, gotcha, yeah that makes sense. ... read »
Nov 20, 2009 at 5:17 PM
Maintaining ColdFusion Sessions Across SMS Text Message Requests Without Cookies
Ben, sorry if I didn't make this clear. You can make it work like that if you want, just put <cfset session.foo = 1> (and <cfset application.foo = 1>) in your OnRequestStart() and it reve ... read »