Hamonbatra Hamonbatra - 1 year ago 54
jQuery Question

link click works only once

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 id="products" class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Our Products </h1>
<div class="col-sm-12">
<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>
<div id="thumbs">
<!--this div for load the products -->

Answer Source

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() {