Удалить пользовательский выпадающий список в случае нажатия снаружи

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