Clone hidden table

JavaScript
1

hey guys, im trying out this cloning and toggling thing to see if they could work together. ive got a table like so:


<table class="StateTable" rules="all" cellpadding="0" cellspacing="0">
   <thead>
      <tr class="statetablerow">
         <th style="width:33%">Table</th>
      </tr>
   </thead>
   <tbody>
     <tr id="2">
     </tr>
   </tbody>
</table>

and another which if u notice has style display:none:


<table class="CityTable" rules="all" cellpadding="0" cellspacing="0" style="display:none" id="scroll">
               <thead>
                  <tr>
                     <th style="width:33%">Table</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>Name #1</td>
                  </tr>
                  <tr>
                     <td>Name #2</td>
                  </tr>
                  <tr>
                     <td>Name #3</td>
                 </tr>
              </tbody>
           </table>

what im trying to do is clone table “.CityTable” into table “.StateTable” after button click and thats working just fine. the issue im facing is that the th of .CityTable is suppose to toggle when it gets cloned into “.StateTable”. “.CityTable” toggles just fine if it is not cloned and displayed as it is, it’s only when it’s cloned the toggle doesnt work.

button:

<button class="dip">Clone 3</button>

toggle:


<script type="text/javascript">
$(document).ready(function(){
    $('.CityTable thead').click(
        function() {
            $(this) .parents('.CityTable').children('tbody').toggle();
        }
    )
});
</script>

clone:


<script>
        $(document).ready(function($) {
        $(".dip").click(function() {
            $('#scroll')
                .clone()
                    .removeAttr('id')
                    .show()
                    .appendTo( $('#2').parent() );
        });
    });
</script>

is there a different way of approaching this? thanks in advance!

2

okay from all the googling, what i got is that i need to reexecute the toggle function after clonning but im totally confusing myself with this re-executioning. what i understand is that i need to have something like this:


function afterClone()
{
    //toggle function(?)
}

which will be triggered by an “onclick” which would be in “<button class=“dip”>Clone 3</button>”? or not?