link click works only once

Question

i have hidden div that contain a div inside it and this div is hidden by default , and i have link should bring the content of (#mobiles_thumbs) div , every thing work perfectly just for first click on the link and the second click the div that change its content disappear i used (on) delegate . this is my code :

 //and here my jquery code for handle the link click : $('#products').on('click', 'a', function() { $("#thumbs").html($("#thumbs_collection #mobiles_thumbs")); /* here #thumbs_collection is the name of big div that contain six div inside it. */ });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- this is the hidden div --> <div id="thumbs_collection"> <div id="mobiles_thumbs" style="visibility:hidden"> <img alt="mobile1" src="images/mobile1.jpg"> <img alt="mobile2" src="images/mobile2.jpg"> </div> </div> <div id="products" class="container-fluid"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h1>Our Products </h1> </div> <div class="col-sm-12"> <ul> <li> <a href="#mobiles"> Mobiles </a></li> <li> <a href="#swatches"> Swatches </a></li> <li> <a href="#chairs"> Chairs </a></li> <li> <a href="#boxs">Boxs </a></li> <li> <a href="#Doors"> Doors </a></li> <li> <a href="#windows"> Windows </a></li> </ul> </div> <div id="thumbs"> <!--this div for load the products --> </div> </div> </div>

Answer 1

Try cloning the element fist and don't forget to toggle visibility after the html append

var temp = $("#thumbs_collection #mobiles_thumbs").clone();
$('#products').on('click', 'a', function() {
  $("#thumbs").html(temp);
});