title: cannot call javascript function inside click handler
body: <p>I have a div like this that is loaded via ajax:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;a href="#" class="easyui-linkbutton submit_data"&gt;Click here to submit&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the same file in which I have the div, I have a script like this:</p>
  
  <pre><code>&lt;script&gt;
      $(function(){
          $('#container').on('click', 'a.submit_data', function(e){
              e.preventDefault();
              alert(test());
          });
  
          function test()
          {
              return 'This is a test';
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem I have is when I call my function <code>test()</code> in the callback of the click event like I did above, I get the error <code>Uncaught TypeError: undefined is not a function</code> when I click on my button (so I don't even get my alert). But if I call my <code>test()</code> function outside of the click handler, everything works as expected.</p>
  
  <p>Dpes anybody know why this is happening please?</p>
  
  <p>Thank you</p>