클릭하면 바깥 쪽에서 사용자 지정 드롭 다운 목록을 제거

Question

사용자 지정 드롭 다운 목록을 만들었습니다. HTML에서 select 태그처럼 작동하도록하고 싶습니다. 드롭 다운 목록의 바깥 쪽을 클릭하면 제거됩니다. 그러나 나는 그것에 문제가있다. 아래 코드는 작동하며 드롭 다운 목록 (optionContainer)을 앞으로 가져 오는 버튼을 클릭 할 때마다 컴파일됩니다.

var optionContainer = document.createElement('div'); 
optionContainer.className = 'optionContainer'; 
button.appendChild(optionContainer); 

var clickOutsideEvent = function(){ 
    $(optionContainer).remove(); 
}; 

$(optionContainer).mouseout(function(){ 
    $(document).delegate('body','click', clickOutsideEvent); 
}); 

$(optionContainer).mouseover(function(){ 
    $(document).undelegate('body', 'click', clickOutsideEvent);   
}); 

그러나 완료하려면 코드를 한 줄 더 추가해야합니다. 아래 코드 줄은 unidented의 마지막 줄 다음에 추가됩니다.

$(document).delegate('body','click', clickOutsideEvent); 

이상한 점은이 코드 줄이 mouseout 이벤트에서 사용 된 것과 정확히 똑같은 것입니다. 그러나이 선은 작동하지 않습니다.

Answer 1

$ (document) .ready 호출에서 마지막 줄을 감싸서 jQuery를로드 할 때 실행합니까?

$(document).ready(function() { 
    $(document).delegate('body','click', clickOutsideEvent); 
});