title: How to handle an event by the handler defined in the javascript which creates the event?
body: <p>I open a html page with a myApp.js included like this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  ......
  &lt;div id="dynamicForm"&gt;&lt;/div&gt;
  ......
  &lt;script type="text/javascript" src="myPath/myApp.js"&gt;&lt;/script&gt;
  ......
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and then I want to load a form defined in myApp.js dynamically on this html page at ("#dynamicForm"), the myApp.js has some lines like this:</p>
  
  <pre><code>.....
  //load the form on the html page
  $('#dynamicForm').html(createDynamicForm()).show();         
  .....
  //the function creating the form
  function createDynamicForm(){
    var jqForm=$('&lt;form id="dynamicFormId"&gt;'
    ......
    + '&lt;button id="btn"&gt;OK&lt;/button&gt;'
    + '&lt;/form&gt;');
    $('body').append(jqForm);
    return jqForm;
  }
  .....
  //click the button on the form to trigger the alert box
  ("#btn").click(function(){
      alert("you click the button");
  });
  </code></pre>
  
  <p>I can load the form on the html page, but when I click the "OK" button on this dynamically loaded form, the alert doesn't pop up, apparently this is because myApp.js is loaded with the html page before the dynamic form is created, the "click" event can not be handled by the handler defined in myApp.js that creates the form. how can I fix this problem?    </p>