load extra html into index and call them from index

Question

index.php

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>

<body>
<div id="menu-main-ul"></div>
</body>
<script type="text/javascript">
$(document).ready(function() {

  $('.masterTooltip').hover(function(){
    // hover over code.
  //   var title = $(this).attr('data-submenu');
  //   $(this).data('tipText', title).removeAttr('title');
  //   $('<p class="tooltip"></p>')
  //   .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');
});
</script>

</html>

check.php

<a href="" id="check-btn" class="masterTooltip">check</a>

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.

But even I put $('.masterTooltip').hover inside $(window).load it won't work. My question is how can i call those those div or a from index ? but without putting those jQuery at check.php ?

If i put those jQuery code at check.php it work.

score 0 · Accepted Answer · answered Nov 04 '16 at 17:03

You need to use a delegated event handler as the .masterTooltip elements are being appended to the DOM after the page loads.

Note that when using a delegated event handler you have to use mouseenter and mouseleave separately as the hover helper event does not propagate in the standard manner. Try this:

$(document).ready(function() {
    $('#menu-main-ul').on('mouseenter', '.masterTooltip', function(){
        var title = $(this).data('submenu');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>').text(title).appendTo('#directoryContainer-wrapper');

        $('.tooltip').css({ 
            top: $(this).offset().top + "px", 
            left: $("#menu-main").width() + "px" 
        }).show();
    }).on('mouseleave', '.masterTooltip', function() {
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    });
});

$(window).on('load', function() {
  $('#menu-main-ul').load('check.php');
});

load extra html into index and call them from index

1 Answers1