ссылка работает только один раз

Question

У меня есть скрытый div, содержащий div внутри него, и этот div скрыт по умолчанию, и у меня есть ссылка на содержимое (#mobiles_thumbs) div, каждая вещь отлично работает только для первого нажатия на ссылка и второй щелчок div, которые меняют его содержимое, исчезают, я использовал (on) делегат. это мой код:

//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

Попробуйте клонировать элемент кулак и не забудьте переключить видимость после HTML добавить

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