title: How to unbind jquery events that are registered after ajax load?
body: <p>How do I unbind / clear the events registered after Ajax load?</p>
  
  <p>I have a web application in the following workflow: User clicks a button, which will launch a pop-up form via FancyBox:</p>
  
  <pre><code>$('.launchPopUp').click(function(){
     var url = 'something';
  
     $.fancybox({
       href : url,
       type : 'ajax'
     });
  });
  </code></pre>
  
  <p>Where the content of the URL is a search form. Here is a simplified version:</p>
  
  <pre><code>This is a pop-up window.
  &lt;a id="searchButton"&gt;Search&lt;/a&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function(){
         $(document).on('click', '#searchButton', function() {
            //Do something here...
         });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>In the pop-up box, the users search the content, which results a table of records. After they select the records, the pop-up box will be closed and the selected contents will be added back to the page.</p>
  
  <p>Everything works as expected. However, when the user closes the fancybox and reopen it again, I found that the jquery events are fired multiple times. I was wondering if there is any way to clear these dynamic jquery events.</p>
  
  <p>Notice that it is impossible to defined the jquery event in the "base" page because the events are based on the user input (before opening the pop-up window).</p>
  
  <p>Thanks!</p>
  
  <hr>
  
  <p>Solution:</p>
  
  <p>In my ajax code, I replaced "document" to "div":</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $('#somediv').ready(function(){
         $('#somediv').on('click', '#searchButton', function() {
            //Do something here...
         });
      });
  &lt;/script&gt;
  </code></pre>