Javascript 动态创建子元素时如何避免再次调用hover/mouseenter

每当用户将鼠标悬停在a上时，我都会在元素（比如a）内动态创建一个框。然后用鼠标移动框B。B只应在用户将鼠标悬停在A上时出现（即在mouseleave上删除）

不幸的是，如果我在B中动态创建元素，当鼠标移到它们上面时，将再次调用悬停事件（创建一个新的B）。当我在鼠标移动时动态创建B的子对象时，这个问题似乎就发生了。起初我以为这与冒泡有关，需要授权，但现在我觉得这与清空盒子并再次填充盒子有关（从而导致悬停事件再次触发）

此示例说明了我遇到的问题：

功能位置框（元件、位置）{
element.css({
top:position-element.parent（）.offset（）.top-10，
});
元素。empty（）；
jQuery（“”）.appendTo（元素）.text（位置）；
}
$（document）.bind（'mousemove'，函数（e）{
if（$（“#theBox”）.length不知道这是否对您有帮助，但您正在为每个div分配一个#id，并尝试使用这些元素，而#id在DOM中必须是唯一的

    $(document).bind('mousemove', function(e) {
    if ($('.inner').length <= 0)
        return;
    positionBox($('.inner'), e.pageY);
});

$('.hover').hover(function(e) {
    var innerBox = jQuery('<div />', {
        id: 'theBox',
        class: 'inner',
    }).appendTo(this).click(function(e) {
    });
    positionBox(innerBox, e.pageY);
}, function(e) {
    $('.inner').remove();
});

$（document）.bind（'mousemove'，函数（e）{
如果（$（'.inner'）.length对我来说，问题实际上看起来像两个：

事件冒泡问题
重复快速创建位置范围的问题

我的理论是，当鼠标悬停在位置标签上时，标签被
.empty（）
破坏，并且没有足够快地重新添加时，这将被视为另一个鼠标进入事件
现在1.可以通过简单地添加

if (e.delegateTarget != e.target)
        return;

您可以注意到问题发生的频率要低得多

两个人


一个简单的解决方案是，每次移动鼠标（和B）时，不再次创建标签。
看看

如果出于某种原因，您希望或必须每次都在B中创建元素，这将无济于事。但是，如果可能不重新创建它们，我建议您这样做，即使只是出于性能原因

如果简单地检查B是否存在是您的一个选项，这将解决它，同时允许您重新创建位置标签-

您可以将处理器移出

**$('body').on('click','#theBox', function(e){
    alert('event handler'); });**

$('.hover').hover(function(e) {
    var innerBox = jQuery('<div />', {
        id: 'theBox',
        class: 'inner',
    }).appendTo(this);
    jQuery('<span />').appendTo(innerBox).text('number');
    positionBox(innerBox, e.pageY);
}, function(e) {
    $('#theBox').remove();
});

**$（'body'）。在（'click'，'theBox'，函数（e）上{
警报（'event handler'）；}）**
$（'.hover'）.hover（函数（e）{
var innerBox=jQuery（“”{
id:“theBox”，
类：'内部'，
}).附于（本）；
jQuery（“”）.appendTo（innerBox.text（“”）.number）；
位置框（内框，例如pageY）；
}，功能（e）{
$（“#theBox”）.remove（）；
});
我认为您不想为此使用
.hover（）
，因为它将在
.mouseenter（）和
.mouseleave（）上调用
。你的代码中有很多错误的地方。之前只是一个问题，这是干什么的？你希望点击一下就能解决这个问题吗？点击的地方在哪里？@Roko感谢你的友好和富有成效的话语。是的。你真的想（或必须）吗当鼠标移动时，创建位置标签无数次？想要，是。需要，不是。内框的内容比我在这里包含的简单示例更复杂。我再次移除该对象。事实上，它不是唯一具有该ID的元素。我已经澄清了我的问题，以更好地澄清这一点。错误仍然存在很遗憾。请尝试稍微晃动鼠标。虽然不经常发生，但仍然会发生。您对
.empty（）
的评论很有趣，但是
span
对象应该包含在外部框中（具有
悬停（）
）这意味着它不应该产生另一个<代码>鼠标器< /代码>。这就是我想知道的事情和真正的症结所在。+ 1考虑它，谢谢。@ Druckles可以检查B是否存在。考虑最新的编辑。Aha，这是个简单的破解。是的，这似乎起作用。我还是好奇为什么它会发出新的<代码>鼠标器< /代码。>虽然.yep，确实是一个简单的快速破解-但我也很好奇，我不确定我的理论是否正确，但我还没有找到更好的解决方案：/抱歉，我不是有意将单击处理程序留在那里。我错误地将其留在了中-它与问题没有直接关系。
**$('body').on('click','#theBox', function(e){
    alert('event handler'); });**

$('.hover').hover(function(e) {
    var innerBox = jQuery('<div />', {
        id: 'theBox',
        class: 'inner',
    }).appendTo(this);
    jQuery('<span />').appendTo(innerBox).text('number');
    positionBox(innerBox, e.pageY);
}, function(e) {
    $('#theBox').remove();
});