title: jQuery function not binding to newly added dom elements
body: <p>Here's <code>index.html</code>:</p>
  
  <pre><code>&lt;head&gt;
    &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
  
      $(document).ready(function() {
        $('.btn_test').click(function() { alert('test'); });
      });
  
      function add(){
        $('body').append('&lt;a href=\'javascript:;\' class=\'btn_test\'&gt;test&lt;/a&gt;');
      }
  
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;a href="javascript:;" class="btn_test"&gt;test1&lt;/a&gt;
    &lt;a href="javascript:;" onclick="add()"&gt;add&lt;/a&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>If I click on <code>test1</code> link, it shows <code>alert('test')</code>, but if I click on <code>add</code> link then click on <code>test</code>, it doesn't show anything.</p>
  
  <p>Could you explain it?</p>