title: Call jQuery function after ajax html get loaded
body: <p>So i have this 2 jQuery functions stored in a .js file and .js file is loaded before head tag</p>
  
  <p>what is in .js file:</p>
  
  <pre><code>$(document).ready(function(){
  
      $("#button1").click(function(){
          $.ajax({
              type: 'GET',
              url: 'button2.php',
              success: 
                  function(html){
                      $('#button_div').html(html)
                  }
              ,
          });     
      });
  
      $("#button2").click(function(){
          $.ajax({
              type: 'GET',
              url: 'button1.php',
              success: 
                  function(html){
                      $('#button_div').html(html)
                  }
              ,
          });     
      });
  
  });
  </code></pre>
  
  <p>So after body I have:</p>
  
  <pre><code>&lt;div id="button_div"&gt;&lt;input type="button" id="button1" value="Press"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>when the button1 is pressed will load php file named button2.php with the div and button2 code, but here when button2 is pressed will not execute the button2 click function. </p>
  
  <p>Why?</p>
  
  <p>If I put the jQuery code of button2 inside button2.php file after elements will work fine. But I don't want that. I want to keep the jQuery lines saved only in a .js file and only before <code>&lt;/head&gt;</code> tag. I don't want to use jQuery lines after elements.</p>