javascript不适用于动态添加的标签

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

使用on委托事件...

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

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

如果您想了解更多关于on 直接和委托事件的信息，可以阅读此post

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

Answer 2

参考你的小提琴...

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

应该是这样的

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

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

Answer 3

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

Answer 4

这是因为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");
});

或者对于 pre-1.7 (delegate)：

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

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