Does changing a DOM element affect bound sub-elements?

Question

I have a touchscreen page with an element <div id="x"> with several sub-elements in the form of:

<div id="x_1" style="certain_class" pid="1723464"></div>
<div id="x_2" style="certain_class" pid="1723465"></div>
<div id="x_3" style="certain_class" pid="1723466"></div>
<div id="x_4" style="certain_class" pid="1723467"></div>

These elements have a jQuery touchstart bind event set on them... Now if I alter these sub-elements using:

$("#x").html("<div id="x_1"></div><div id="x_2"></div><div id="x_3"></div><div id="x_4"></div>");

which changes these sub-elements to:

<div id="x_1"></div>
<div id="x_2"></div>
<div id="x_3"></div>
<div id="x_4"></div>

Why is it I seem to lose the touchstart bind set to these elements? Is it because I'm rendering the sub-elements within the parent element null and void, and thus the binding event?

Should I be changing the extra parameters on these elements bit by bit through the individual sub-elements within the parent node, rather than using the .html() method on the parent node?

Any help is greatly appreciated...

Answer 1

Pretty much you are deleting the existing elements (and their bindings), and creating new ones with identical ids (but without bindings). One solution would be to use jQuery.fn.on to bind events. This way the binding will be part of x which is kept.

$('#x').on('touchstart', '#x_1, #x_2, #x3, #x4', yourFunction)

Answer 2

When you replace child elements like you are doing with the .html() jQuery method, then the old DOM elements that had event handlers bound to them are completely removed and no longer in the DOM. Thus, your event handlers that were on those elements are then gone.

You have several options:

1. Stop replacing the elements. Instead, just modify them so that the same elements stay in the page and thus their event handlers stay intact.

2. Reattach the event handlers after you set .html() to install new event handlers to the new elements.

3. Use delegated event handling that is attached to a parent object that is not destroyed/recreated.

My first choice is to stop replacing the elements if that is practical. I don't know exactly what type of change you're trying to have take place so I don't know how simple this would be.

Oftentimes, delegated event handling is the most elegant solution. You attach an event handler once to a parent and it will stay in effect even though you destroy and recreate the children. In this case, here's one way to do that:

$("#x").on("touchstart", "[id^='x_']", function(e) {
    // event handler code here
    // the this pointer will point to the origional DOM object that caused the event
});

This attaches a delegated event handler to the #x object and that event handler fires anytime the touchstart event happens on any child object whose id attribute starts with "x_".

Here are some other references on delegated event handling:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

JQuery Event Handlers - What's the "Best" method