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?


Example code:

<div id=right_side>
    <input type="text" id="firstname">Susan</input>
    <label for="nickname">Nickname? <input type="checkbox" id="nickname"></label>

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.

  • I'm not sure about the problem. Can you give example of the code? your current leave and sibling's leaf div might be overlapping. You might want to check it in element inspector. Jun 25, 2015 at 16:46
  • the leaf elements are not overlapping. They simply do a JQuery .load() call to fill the right side div. The issue is the contents of that right side div that is emptied via .empty() and reloaded with similar data. An example of similar data is an input element with an id='firstname'. I'll add some example code to my question
    – bh3333
    Jun 25, 2015 at 17:07

1 Answer 1


Do not bind events to elements that may appear, disappear, or change. Bind them on the parent DIV:

<div id="right_side">
    <input type="text" id="firstname">Susan</input>
    <label for="nickname">Nickname? <input type="checkbox" id="nickname"> </label>
    // This script must be executed only once (i.e. must not be in the loaded code).
    // Actually it would be better if it were executed from the jQuery
    // onload bootstrap call.
    // It listens on any change event on any INPUT tag inside #right_side
    // whether it has been already loaded or not.

    $('#right_side').on('change', 'input', function(x) {

        // We do not know WHICH control got changed.
        var id = $(this).attr("id");

        // We also would need some data from the left side, probably.
        // e.g. on the left side we have an A tag with data-right="foo"
        // and an onclick() that clears the .clicked class from all
        // tree's As, then adds the .clicked class to that A only.
        // This way $('#tree a.clicked').attr("data-right") will tell us
        // which A determined the loading of the right-hand panel.

        console.log("input with id " + id + " has changed");

  • Thank you. This explanation makes sense to me as to why my current code is acting flaky. I appreciate the explanation. :-)
    – bh3333
    Jun 25, 2015 at 18:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.