在外部點擊時刪除自定義的下拉列表

Question

我做了一個自定義的下拉列表。我希望它能像HTML中的選擇標籤一樣工作。當我點擊外部下拉列表我希望它被刪除。但我遇到了問題。下面的代碼正在工作，只要點擊一個提供下拉列表（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);   
}); 

但是，我需要再添加一行代碼才能完成。下面的代碼行添加在未登錄的最後一行之後。

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

奇怪的是，這行代碼與mouseout事件中使用的行完全相同。但是這條線不起作用。

Answer 1

你是否在$（document）.ready調用中包裝了最後一行，因此它在jQuery加載時執行？

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