title: re-applying jquery to cloned objects
body: <p>What is the proper way to re-apply jquery to objects which are cloned??</p>
  
  <p>I have an example I rigged up in jsfiddle here: <a href="http://jsfiddle.net/49o6arLu/16/" rel="nofollow">http://jsfiddle.net/49o6arLu/16/</a></p>
  
  <pre><code>&lt;div class="hidden element-holder"&gt;
      &lt;div class="element"&gt;
          &lt;div class="button"&gt;Button&lt;/div&gt;
          &lt;div class="green-square"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="element"&gt;
      &lt;div class="button"&gt;Button&lt;/div&gt;
      &lt;div class="green-square"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;div class="add-element"&gt;Add Element&lt;/div&gt;
  </code></pre>
  
  <p>
  
  <pre><code>$('div.button').click(function(event) {
      if($(this).parent().children('.green-square').is(':visible')) {
           $(this).parent().children('.green-square').hide();
      }else{
           $(this).parent().children('.green-square').show();
      }
  });
  
  $('div.add-element').click(function(event) {
      $('div.element-holder').children('div').clone().insertAfter($('div.element-holder'));
  });
  </code></pre>
  
  <p>As you can see, the initial displayed box and button work just fine. However, When you add another element the new element button does not work anymore.</p>
  
  <p>I understand why I have this problem, however I don't know the proper way I should go about re-applying the Jquery to the new elements which are cloned. </p>
  
  <p>Can someone provide a solution to the jquery and provide some explanation as to what you did? </p>
  
  <p>Thanks!</p>