0

我目前面临一个奇怪的错误，涉及 javascript。我使用 jquery ui 选项卡在我的网站中动态添加和删除选项卡，选项卡的内容包含两个按钮，当鼠标悬停时它们会消失并在底部相关链接的鼠标离开时可见。此鼠标悬停适用于第一个默认选项卡，但不适用于动态添加的选项卡。当我将鼠标悬停在新标签的内容上时，效果不会发生。这是一个小提琴

http://jsfiddle.net/Hunain/E2nJa/ 这个小提琴与我的结果不完全一样，不包含我的问题，所以请正确阅读我的上述声明，因为我已经解释了我使用以下代码进行鼠标悬停的问题

$("#butt").mouseenter(function () {
            $("#butt").css("visibility","hidden");
          })
          $("#info").mouseleave(function () {
            $("#butt").css("visibility","visible");
          });
4

4 回答 4

3

您正在绑定文档加载事件并在绑定事件后添加按钮。所以事件不会与后来添加的元素绑定。
您应该在添加按钮后绑定事件。

于 2013-02-28T12:41:25.587 回答
1

这是因为mouseenter并且mouseleave仅适用于页面加载时 DOM 中存在的项目

您需要使用委托事件：on对于 jQuery 1.7+，或delegate更早版本。

试试这个（on）：

$("body").on("mouseenter", "#butt", function () {
    $(this).css("visibility","hidden");
});

$("body").on("mouseleave", "#butt", function () {
    $(this).css("visibility","visible");
});

或者对于 1.7 之前的版本（delegate）：

$("body").delegate("#butt", "mouseenter", function () {
    $(this).css("visibility","hidden");
});

$("body").delegate("#butt", "mouseleave", function () {
    $(this).css("visibility","visible");
});
于 2013-02-28T12:40:59.643 回答
1

参考你的小提琴......

$("#butt").mouseenter(function () {
     $("#butt").css("visibility", "hidden");
 })

应该是这样的

$jQuery.on("mouseenter","#butt",function () {
     $("#butt").css("visibility", "hidden");
 });

对于您知道将在运行时添加的其他元素也是如此。

于 2013-02-28T12:41:42.130 回答
1

使用on委托事件...

$(document).on("mouseenter", "#butt", function () {
  $(this).css("visibility","hidden");
});

$(document).on("mouseleave", "#butt", function () {
  $(this).css("visibility","visible");
});

如果您想了解有关直接和委托事件的更多信息，可以阅读这篇文章on

最好将其委托给文档中存在的最接近的静态元素，而不是委托给document更好body的性能

于 2013-02-28T12:42:31.317 回答