Question

我的jQuery悬停没什么问题。我创建了我的个人页面，并从AJAX加载了我的数据。所以我无法弄清楚为什么悬停是在窃听。首先，我坚持这是因为我的元素是位置：绝对，但后来我编辑它并使它成为普通div.Here是我的代码：

<td id="project" style="background: url('img/pctutorials-bg.png');background-repeat:no-repeat;background-position:center center;vertical-align:bottom;" >
<div class="projectinfo" >
<div class="text" >PCTutorials-BG</div>
</div>
</td>

的jQuery

$(".projectinfo").hover(
  function () {
    alert("Inside");
  },
  function () {
    alert("Outside");
  }
);

可以这样，因为这是在页面加载时不在页面上的元素上。我稍后用AJAX加载元素？

Answer 1

然后你需要试试这个：

$(document).on('mouseenter', '.projectinfo', function () {
    alert("Inside");
}).on('mouseleave', '.projectinfo', function () {
    alert("Outside");
});

Answer 2

您可以在所有当前和未来的元素上附加mouseenter和mouseleave功能，如下所示：

$(function() {
  $('#project').on('mouseenter', '.projectinfo', function () {
    alert("Inside");
  }).on('mouseleave', '.projectinfo', function () {
    alert("Outside");
  });
);

参考：http://api.jquery.com/on/

hover相当于mouseenter和mouseleave，因此hover无法直接与on一起使用。将这两种功能添加到悬停时有点重，因此最好分别使用mouseenter和mouseleave。

我使用$('#project').on的原因是为了提高性能。每当你创建一些东西时，jQuery必须搜索整个 DOM树，寻找.projectinfo个节点，所以这将使jQuery只在#project下查找。快得多。

jQuery悬停奇怪的bug

2 个答案: