title: load extra html into index and call them from index
body: <p>index.php</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="menu-main-ul"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
    $('.masterTooltip').hover(function(){
      // hover over code.
    //   var title = $(this).attr('data-submenu');
    //   $(this).data('tipText', title).removeAttr('title');
    //   $('&lt;p class="tooltip"&gt;&lt;/p&gt;')
    //   .text(title)
    //   .appendTo('#directoryContainer-wrapper');
    //
    //   var x = $(this).offset();
    //   var w = $("#menu-main").width();
    //   $('.tooltip').css({ top: x.top + "px", left: w + "px" }).show();
    // }, function() {
    //   // hover out code.
    //   $(this).attr('title', $(this).data('tipText'));
    //   $('.tooltip').remove();
    alert("check")
    });
  });
  
  $(window).load(function() {
    //MAIN MENU HTML LOAD.
    $('#menu-main-ul').load('check.php');
  });
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>check.php</p>
  
  <pre><code>&lt;a href="" id="check-btn" class="masterTooltip"&gt;check&lt;/a&gt;
  </code></pre>
  
  <p>I am loading some extra html into my index page , but i can't call any div or a jQuery from index page. i know is because it load the html after the page was done and i call before that.</p>
  
  <p>But even I put <code>$('.masterTooltip').hover</code> inside <code>$(window).load</code> it won't work. My question is how can i call those those <code>div</code> or a from index ? but without putting those jQuery at <code>check.php</code> ?</p>
  
  <p>If i put those jQuery code at <code>check.php</code> it work.</p>