Remove a custom made drop-down list in the event of click outside

I made a custom drop-down list. And I want it to function like the select tag in HTML. When I click outside the dropdown list I want it to be removed. But I got problem with it. The code below is working and it is compiled when开发者_高级运维ever I click on a button that brings forward the drop-down list (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);         
});

But, I need to add one more line of code to make it complete. The line of code below is added after the last line above unidented.

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

The weird thing is that this line of code is exactly the same line used on the mouseout event. But this line doesn't work.

did you wrap the last line in the $(document).ready call, so it executes when jQuery is loaded?

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