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>

我正在将一些额外的html加载到我的索引页面中，但我无法从索引页面调用任何div或jQuery。我知道是因为它在页面完成后加载了html，我之前调用了它。

但即使我将$('.masterTooltip').hover置于$(window).load内，也无法正常工作。我的问题是我如何称呼那些div或来自索引？但是没有把这些jQuery放在check.php？

如果我将这些jQuery代码放在check.php它可以工作。

Answer 1

您需要使用委托事件处理程序，因为在页面加载后.masterTooltip元素将附加到DOM。

请注意，使用委派事件处理程序时，必须单独使用mouseenter和mouseleave，因为hover帮助程序事件不会以标准方式传播。试试这个：

$(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');
});

将额外的html加载到索引中并从索引

1 个答案: