Javascript jQuery如何在每次调用之前只预加一次div？

我想：

在ul“悬停在”上，将a

div#object1

前置到主体

在“悬停关闭”按钮上，删除

div#object1

重复

问题是，尽管可以在“悬停”上预先添加

div#object1

，但它会多次这样做

因此，我的问题是，如何在每次调用之前只预编一次

div#object1

我也用

one（）

尝试过，但第二次悬停时，

div#object1

未加前缀。换句话说，

one（）

在第二次调用中不起作用

这是我的代码（）：

$（文档）.ready（函数（）{
$（'ul#menu'）.one（'mouseover'，function（）{
$（'body'）。前缀（“”）；
});
$（'#menu li a#omnie'）.mouseover（function（）{
$（'div#object1'）.stop（）.animate({
右：530，
前8名，
不透明度：1
}, 100);
});
$（'#menu li a#of erta'）。鼠标悬停（函数（）{
$（'div#object1'）.stop（）.animate({
右：445，
前8名，
不透明度：1
}, 100);
});
$（“#菜单”）.mouseleave（函数（）{
$（'div#object1'）.fadeOut（300，function（）{
$（this.remove（）；
});
});
});

使用

。一个
对您没有帮助，它所做的是在一次调用后自动解除处理程序的绑定，并且它永远不会再次被调用，即使您稍后将鼠标悬停在处理程序上

您应该使用的是
.on（'mouseenter'）
而不是
.on（'mouseover'）

每次鼠标从外部或从其子项之一进入
#菜单
列表时，都会触发
鼠标上方

另一方面，
mouseenter
仅在鼠标进入
#菜单
时触发，而在鼠标从其子菜单悬停回来时不触发


$（“#父项”）。在（“鼠标指针”，函数（e）上{
$（'#'+e.type）.text(
parseInt（$（'#'+e.type）.text（））+1
);
});
#父级{
背景：水鸭；
高度：150像素；
宽度：300px；
颜色：白色；
}
#孩子{
背景：橙色；
身高：50%；
宽度：50%；
颜色：黑色；
}
#事件{
填充：10px；
宽度：280px；
文本对齐：居中
}
#父母#子女{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}

鼠标指针：0鼠标指针：0
父母亲
小孩
使用
。一个
对您没有帮助，它所做的是在一次调用后自动解除处理程序的绑定，并且它永远不会再次被调用，即使您稍后将鼠标悬停在处理程序上

您应该使用的是
.on（'mouseenter'）
而不是
.on（'mouseover'）

每次鼠标从外部或从其子项之一进入
#菜单
列表时，都会触发
鼠标上方

另一方面，
mouseenter
仅在鼠标进入
#菜单
时触发，而在鼠标从其子菜单悬停回来时不触发


$（“#父项”）。在（“鼠标指针”，函数（e）上{
$（'#'+e.type）.text(
parseInt（$（'#'+e.type）.text（））+1
);
});
#父级{
背景：水鸭；
高度：150像素；
宽度：300px；
颜色：白色；
}
#孩子{
背景：橙色；
身高：50%；
宽度：50%；
颜色：黑色；
}
#事件{
填充：10px；
宽度：280px；
文本对齐：居中
}
#父母#子女{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}

鼠标指针：0鼠标指针：0
父母亲
小孩
$（'ul#menu'）。on（'mouseover'，function（）{
使用它$（'ul#menu'）。on（'mouseenter'，function（）{似乎可以工作，因为'mouseenter'比'mouseover'好->前置器只触发一次，但在mouseleave上它会添加一个额外的div（'ul#menu'）。on（'mouseover'，function（）{/code>使用它。$（'ul menu'）。on（'mouseenter'，function（）{似乎可以工作，因为'mouseenter'比'mouseover'好->前缀只触发一次，但在mouseleave上它会添加一个额外的div
$(document).ready(function() {

  $('ul#menu').one('mouseover', function() {
    $('body').prepend('<div id="object1"></div>');
  });

  $('#menu li a#omnie').mouseover(function() {
    $('div#object1').stop().animate({
      right: 530,
      top: 8,
      opacity: 1
    }, 100);
  });

  $('#menu li a#oferta').mouseover(function() {
    $('div#object1').stop().animate({
      right: 445,
      top: 8,
      opacity: 1
    }, 100);
  });

  $('#menu').mouseleave(function() {
    $('div#object1').fadeOut(300, function() {
      $(this).remove();
    });
  });

});