Question

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 whenever 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.

Answer 1

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