クリックした外のイベントでカスタム作成したドロップダウンリストを削除

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

しかし、完成させるためにもう1行のコードを追加する必要があります。以下のコード行は、上記の最後の行の後に追加されます。

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

このコード行は、mouseoutイベントで使用されているのとまったく同じ行です。しかし、この行は機能しません。

Answer 1

$（document）.ready呼び出しで最後の行を折り返しましたか？それでjQueryがロードされたときに実行されますか？

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