title: Jquery events not working on ajax loaded content
body: <p>The below code works. If there is some better way please let me know.
  If i use the script content which is present in test.html in the main page where I am loading test.html through ajax. The script doesn't work.</p>
  
  <pre><code>&lt;html&gt; 
      &lt;head&gt;
          &lt;script src='jquerylocation' type='text/javascript'&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id='ajaxload'&gt;&lt;/div&gt;
          &lt;button class='test'&gt;load content via ajax&lt;/button&gt;
      &lt;/body&gt;
  
  
      &lt;script&gt;
          $(function(){
              $('.test').on('click',function(){
                    $('#ajaxload').load('test.html');
              });            
          });
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Test.html:</p>
  
  <pre><code>    &lt;h1 class='heading'&gt;Page via AJAX&lt;/h1&gt;
  
      &lt;script&gt;
          $(function(){
              $('.heading').on('click',function(){
                  $(this).css('color','red');  
              });                          
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>we have to load the script along with dynamically loaded content through ajax to work as you require.But disadvantage I felt was each time we send ajax request script loads all the time along with content. But I found only this solution. If anyone knows better solution please reply.</p>
  
  <p>For example if change the code this way it wont work.</p>
  
  <pre><code>&lt;html&gt; 
      &lt;head&gt;
          &lt;script src='jquerylocation' type='text/javascript'&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id='ajaxload'&gt;&lt;/div&gt;
          &lt;button class='test'&gt;load content via ajax&lt;/button&gt;
      &lt;/body&gt;
  
  
      &lt;script&gt;
          $(function(){
              $('.test').on('click',function(){
                    $('#ajaxload').load('test.html');
              });
  
              $('.heading').on('click',function(){
                  $(this).css('color','red');  
              });                                   
          });
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Test.html:</p>
  
  <pre><code>    &lt;h1 class='heading'&gt;Page via AJAX&lt;/h1&gt;
  </code></pre>