title: jQuery functionality not working after AJAX call
body: <p>I seem to be having an issue with a jQuery click function, I have the following code:</p>
  
  <pre><code>j$(document).ready(function(e) {
  
  setInterval(function(){
  
      j$.ajax({
        url: "/include/new_customer.php",
        cache: false
      })
        .done(function( html ) {
          j$( "section .col-xs-12" ).append( html );
        });
  
  
    },80000);
  
      j$('a.dropDown').click(function(e){
          e.preventDefault();
          j$(this).closest('.row').next().toggleClass('hidden');
      });
  });
  </code></pre>
  
  <p>with the following HTML ( grabbing what's necessary):</p>
  
  <pre><code>&lt;div class="col-xs-12&gt;
      &lt;div class="row"&gt;
          &lt;a href="#" class="dropDown"&gt;Manage&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="row hidden"&gt;
          &lt;!-- stuff --&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>You can see if you click the a tag, the row with the class hidden will toggle. I have AJAX that appends another 2 rows so it will be like so:</p>
  
  <pre><code>&lt;div class="col-xs-12&gt;
          &lt;div class="row"&gt;
              &lt;a href="#" class="dropDown"&gt;Manage&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="row hidden"&gt;
              &lt;!-- stuff --&gt;
          &lt;/div&gt;  
          &lt;div class="row"&gt;
              &lt;a href="#" class="dropDown"&gt;Manage&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="row hidden"&gt;
              &lt;!-- stuff --&gt;
          &lt;/div&gt;    
      &lt;/div&gt;
  </code></pre>
  
  <p>My problem is that with the new data, when I click on the a tag, the toggle functionality doesn't work. I have done some tests such as removing the class hidden from inspect element and there is data to display. I don't know what's going on. Please help!</p>