jQueryどのように1回の呼び出しにつき1回だけdivを追加するのですか？

Question

私がしたい：身体にdiv#object1を付加ulの 'オンホバー' に関する

1. を。
2. を 'ホバーオフ'に設定すると、そのdiv#object1が削除されます。
3. 繰り返し

問題は、何度もそれほど多くありません「にホバー」にdiv#object1を付加することは可能であるが、ということです。

私の質問div#object1の前にどのように1回の呼び出しで1回だけですか？

私もone()で試しましたが、2回目にホバーすると、div#object1は前に付いていません。つまり、one()は2回目の呼び出しでは機能しません。

ここで（JsFiddle）私のコードです：

$(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(); 
    }); 
    }); 

}); 

Answer 1

.oneを使用するお手伝いをするつもりはない、どのようなことがないことは、自動的に1回のコールの後にハンドラをアンバインドされ、そしてそれはも、あなたならば、再び呼び出されることは決してありません後でそれをホバーします。

の代わりに.on('mouseenter')を使用してください。

が外部から、またはその子アイテムのいずれかから#menuのリストに入るたびに、トリガーされます。

一方、mouseenterは、マウスが#menuと入力されたときにトリガーされ、子からマウスを戻すとトリガーされません。

$('#parent').on("mouseover mouseenter", function(e) { 
 
    $('#' + e.type).text(
 
    parseInt($('#' + e.type).text()) + 1 
 
); 
 
});

#parent { 
 
    background: teal; 
 
    height: 150px; 
 
    width: 300px; 
 
    color: white; 
 
} 
 

 
#child { 
 
    background: orange; 
 
    height: 50%; 
 
    width: 50%; 
 
    color: black; 
 
} 
 

 
#event { 
 
    padding: 10px; 
 
    width: 280px; 
 
    text-align: center 
 
} 
 

 
#parent,#child { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="event"> 
 
    Mouseover: <span id="mouseover">0</span> Mouseenter: <span id="mouseenter">0</span> 
 
</div> 
 
<div id="parent"> 
 
    <h3>Parent</h3> 
 
    <div id="child"> 
 
    <h3>Child</h3> 
 
    </div> 
 
</div>