jQuery 전화 당 한 번만 div를 앞에 추가하는 방법은 무엇입니까?

Question

내가 원하는 :

UL '에 가져가'에

1. 몸에 div#object1 앞에 추가.
2. 에서 'hover off'는 해당 내용을 제거합니다. div#object1.

문제

반복 여러 번 그래서 더 수행 '에 가져가'에 div#object1 앞에 추가 할 수 있지만, 점이다.

따라서 내 질문에 어떻게하면 div#object1을 한 번만 추가 할 수 있습니까?

나는 또한 one()으로 시도했지만 두 번째로 이동하면 div#object1이 앞에 붙지 않습니다. 즉, 두 번째 호출에서는 one()이 작동하지 않습니다. 여기

내 코드 (JsFiddle)입니다 : .one가 도움이 될 수 없습니다 사용

$(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

, 어떤이 자동으로되어하는 일은 하나의 호출 후 처리기를 바인딩 해제하고 다시 호출되지 없구요 경우에도 마찬가지 나중에 어떤 지점에 올려 놓으십시오.

대신 .on('mouseenter')을 사용해야합니다.

이 외부 또는 어린이 항목 중 하나에서 #menu 목록에 입력 될 때마다 mouseover이 트리거됩니다.

한편, 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>