Event Handlers not working after DOM manipulation
<p>On page load I bind Event Handlers with content which is hidden on at the time of page load. </p>

<p>If users clicks on the button, the hidden content is pulled and replaces the main content of the page, Now the event Handlers which were initially binded do not work.</p>

<p>HTML code on Page load </p>

<pre><code>&lt;p&gt; Initial content of the page &lt;/p&gt;
&lt;button id="button"&gt; Click Here to change content&lt;/button&gt;
&lt;div class="show-later" style="display: none;"&gt; Some Hidden content &lt;/div&gt;  
</code></pre>

<p>After the user clicks a button the new dom looks some thing like this</p>

<pre><code>&lt;p&gt;
 &lt;div&gt;Some Hidden content&lt;/div&gt;
&lt;/p&gt;
</code></pre>

<p>After the manipulation the event handlers binded to the div element do not work any more. Please notice that the div goes into the P element after DOM Manipulation.</p>

<p>jQuery Code:</p>

<pre><code>   $('#button').click(function(){
      var show_later = $('.show-later').html();
      $('p').html(show_later);
   });

   $(document).ready(function(){
      $('.show-later').click(function(){
       // Do something.....
      });
   });
</code></pre>
