title: How to delete and reload jQuery / javascript functions after ajax call
body: <p>Let's say I have this code:</p>
  
  <pre><code>&lt;div id="content"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I use a simple ajax request to fill the content with data which work when I click some button</p>
  
  <pre><code>    $.get("page?num=" + pageNumber, function(data){
                  $("div#content").html(data);
  });
  </code></pre>
  
  <p>one time the data will be</p>
  
  <pre><code>&lt;div id="Data1"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and other time it will be</p>
  
  <pre><code>&lt;div id="Data2"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>for each id I have differnet jquery functions. for exampe:</p>
  
  <pre><code>$('#Data1').click(function(){});
  </code></pre>
  
  <p>some of the functions are similar and some are different.</p>
  
  <p><strong>My question</strong> - if I click the button I load all the scripts I need. when I click the other button I need to load the scripts again for the new content, <strong>but what happens to the old functions that was relevant to the previous content?</strong> Each time I click I load new scripts without deleting the last ones.</p>
  
  <p><strong>How do I delete/manage my scripts correctly?</strong></p>
  
  <p>thanks,
  Alon</p>