title: Registering an existing event to ajax loaded DOM?
body: <p>In my homepage , I have this button.</p>
  
  <pre><code>&lt;button class="test"&gt;test&lt;/button&gt;
  </code></pre>
  
  <p>And in my current code I have this script</p>
  
  <pre><code>$('.test').on('click',function(){
          alert("YOU CLICKED ME");
      });
  </code></pre>
  
  <p>Now, my application is ajaxified, so everytime I click a new page it is loaded as ajax, the problem is that the loaded page also has this button. and its markup is likethis</p>
  
  <pre><code>&lt;div id ="firstDiv&gt;
     &lt;div id ="secondDiv"&gt;       
    &lt;button class="test"&gt;test&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div
  </code></pre>
  
  <p>So the new content also has "#test" but how come when I click that button it does not execute the event handler I created?</p>