Skip to main content
Ben Nadel at InVision In Real Life (IRL) 2019 (Phoenix, AZ) with: Scott Markovits
Ben Nadel at InVision In Real Life (IRL) 2019 (Phoenix, AZ) with: Scott Markovits

jQuery.empty() Kills Event Binding On Persistent Nodes

By
Published in — Comments (15)

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:

<!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:

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??

Want to use code from this post? Check out the license.

Short link: https://bennadel.com/1008

Reader Comments

45 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 :)

15,848 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.

198 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.

15,848 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.

3 Comments

Hey,

If you are happy to refactor code, you could try using the .sort() method of the Array object with a jQuery object. e.g.

$('.container .node').sort(function(a, b) {
// A and B are two Dom elements

// If you are shuffling then sort randomly
var move = Math.random() - 0.5;

// Move them accordingly
if(Math.random() > 0) {

// Move A left 30px here

// Move B right 30px here

return true;
}
// Else leave in the same positions

});

3 Comments

@Ben Nadel,

The sort function I suggested is the native javascript sort function, a tutorial for that can be found here: http://www.javascriptkit.com/javatutors/arraysort.shtml

The example I posted earlier was more a rough suggestion of its functionality so I've written a quick implementation here:

http://hugheth.com/Shuffler.html

Please feel free to use and distribute.

The advantage of the sort function is that it can also be used to sort things alphabetically, classes etc.

15,848 Comments

@Hugheth,

I am sorry, I did not communicate well; I understand the benefits of sorting arrays in Javascript. What I was asking you was how the array sorting related to this blog post? I am not seeing the connection?

3 Comments

@Ben Nadel,

You mentioned reordering nodes inside a container, I thought it might have some relevance. I understand it doesn't directly solve the problem at hand though!

If you wanted to write a script that acted purely on the DOM rather than using CSS, I think DOM elements keep their events when moved so would it be possible to just re-"append()" elements in a new order to their parent node?

1 Comments

Thanks for this article; I had a similar problem when trying to use an Array object to manage a series of nodes during a sort relative to a Google map. The suggestion above to just .hide()/.show() elements solved my issue and pointed out that storing nodes in their own structure actually isn't necessary, as you can append them to a general structure and still access the nodes by reference.

Oh my chickens, this post is old!
I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
— Ben Nadel