I have a tree structure on the left side of my page from which the user can drill down and select items. Each branch has similar items. When clicking a leaf node, I make a JQuery .load(…) call that loads the leaf's data into a div on the right side of the page.
The user can view and/or make changes to the displayed data. If the user selects a sibling leaf, I use .empty() to clear the right side div, a new .load() call is made, and the new data is loaded.
My problem is that the .on('click'…. code from the previous leaf is still active. The sibling's .on('click'…. code is ignored. If I click on the original leaf again (it is reloaded via .load) the .on('click'…. calls work.
Is there a way to clear the previous JQuery 'click' listeners or am I going to have to come up with a way to set a unique id for each leaf's data?
Edit:
Example code:
<div id=right_side>
<input type="text" id="firstname">Susan</input>
<label for="nickname">Nickname? <input type="checkbox" id="nickname"></label>
</div>
<script>window.jQuery('#nickname').on('change',function(x){console.log("changed");})</script>
The above code is loaded into the right side div whenever a leaf node in the tree is clicked. The checkbox 'nickname' ceases to work on subsequent loads for other leaf nodes. There is a checkbox with an id of 'nickname' in all of the leafs. I thought if I emptied the right side div, the associated listeners would be rendered mute (so to speak) but the initial listeners remain active even after the .empty() call.
Best Answer
Do not bind events to elements that may appear, disappear, or change. Bind them on the parent DIV: