Changing DOM elements with Jquery

Question

I have a Bootstrap panel that looks like this:

  <div class="col-md-4 col-sm-6">
            <div class="panel panel-default ">
                <div class="panel-heading"><a href="#" class="pull-right" id="back">Back</a> <h4>Title 1</h4>
                </div>
                <div class="panel-body pre-scrollable">
                    <div id="data">
                        <div id="info">
                            <div class="list">Item 1
                                <div class="hidden">This is the rest of the data</div>
                            </div>
                            <div class="list">Item 2
                                <div class="hidden">This is the rest of the data</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>    

I'm using this javascript to toggle between the list items and the child div and display the contents in the panel. When the "Back" link is clicked the panel shows the original list of items.

 $(document).on("ready", function(){/* jQuery toggle layout */

   $( "#info .list" ).on('click' , function() {
     window.data = $("#info").html();
     var htmlString = $( this ).find('div.hidden').html();

     $( "#info" ).html( htmlString );

   });

   $( "#back" ).on('click',  function() {
     console.log(window.data);
     $( "#info" ).html( window.data ); 
   });
 });

Everything is working fine except it will only works once, I then have to refresh the page for it to work again.

What am I missing here?

Heres a working example:

http://www.bootply.com/y84ZiHTQ5W

Answer 1

As you are manipulating the dom with javascript so the event would work only once. To bind the click event on the element even if it gets changed by js, you should use event delegation technique, which has a bit of same syntax:

    $("#info").on('click', ".list", function() {
      window.data = $("#info").html();
      var htmlString = $(this).find('div.hidden').html();

      $("#info").html(htmlString);
    });

    $(document).on("click","#back", function() {
      console.log(window.data);
      $("#info").html(window.data);
    });

You can change $("#info") to this too: $(document), $("body") .

Answer 2

The reason it only works the first time is that when you set the html contents of the #info div the DOM element that has the click event associated with it gets overwritten.

To get it to work you'd need to re-add the click event handler after writing the contents of the #info div. Something like this:

$( "#info .list" ).on('click' , clickHandler);

function clickHandler() {
   window.data = $("#info").html();
   var htmlString = $( this ).find('div.hidden').html();

   $( "#info" ).html( htmlString );
   $( "#info .list" ).on('click' , clickHandler);
}