Question

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

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

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

Answer 1

您在绑定事件后绑定文档加载事件并添加按钮。因此事件不会与稍后添加的元素绑定你应该在添加按钮后绑定事件。

Answer 2

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

您需要使用委托事件：jQuery 1.7+的on或早期版本的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");
});

Answer 3

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

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

应该是这样的

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

同样适用于您知道将在运行时添加的其他元素。

Answer 4

使用on委派活动......

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

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

如果您想了解有关on直接和委派活动的更多信息，可以通读此post

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

javascript无法动态添加标签

4 个答案: