focusout() not working as expected (in this very basic example) - html

Question

I'm trying to create a custom dropdown with two simple elements -- a div for the dropdown header, and a div to contain the items. When the header-div is clicked, the items-div is to be opened, and when the items-div loses focus, it is to be closed.
Code (HTML):
<div id="dd_header" style="width:200px;height:20px;border:1px solid gray"></div>
<div id="dd_items" style="width:200px;height:200px;border:1px solid gray">
Item 1<br/>
Item 2<br/>
Item 3<br/>
</div>
Code (JS):
$("#dd_items").hide();
$("#dd_header").click(function () {
$("#dd_items").show();
});
$("#dd_items").focusout(function () {
$("#dd_items").hide();
});
jsFiddle -- http://jsfiddle.net/FLnHG/
For some reason, the focusout event isn't firing. What am I missing?
(Note: Adding the focusout on #dd_header works, but that doesn't help because the user won't be able to make a selection from the items).

Answer 1

add js code in ready and use mouseout
$(document).ready(function(){
$("#dd_items").hide();
$("#dd_header").click(function () {
$("#dd_items").show();
});
$("#dd_items").mouseout(function () {
$("#dd_items").hide();
});
});

Answer 2

You can try this way:
$("#dd_items").hide();
$("#dd_header, #dd_items").click(function (e) {
e.stopPropagation(); ///<----this stops the event to bubble up at document
$("#dd_items").show();
});
$(document).click(function () {
$("#dd_items").hide();
});
Updated Fiddle

Answer 3

focus event is applicable to a limited set of elements, such as form elements (, , etc.) and links ().
Change:
<div id="dd_header"></div>
to
<input type ="text" id="dd_header" />
JS:
$("#dd_header").focusout(function () {
$("#dd_items").hide();
});
DEMO here.

Answer 4

Item 1<br/>
Item 2<br/>
Item 3<br/>
This are text and text can not get focus so they can not fire focusout event, You need to have link or control instead of this.check this fiddle

Answer 5

Try this:
$(document).ready(function(){
$("#dd_items").hide();
$("#dd_header").click(function () {
$("#dd_items").show();
});
$("#dd_items").mouseleave(function () {
$("#dd_items").hide();
});
});

Answer 6

HTML:
<div id="dd_header" tabindex="-1"></div>
<div id="dd_items">
Item 1<br/>
Item 2<br/>
Item 3<br/>
</div>
jQuery:
$("#dd_items").attr('tabindex',-1).focus(function () {
});
$(window).focusout(function () {
$("#dd_items").hide();
});

Answer 7

Well I'm not sure what you exactly want from the question but looking at the comments on other answers, I came up with a modification to your own fiddle.
I chose to do it without the use of jQuery. It's a very simple CSS solution to perhaps what you want. Only difference if any, is that the list will toggle on hover(instead of click as in your plan)
Try the fiddle and let us know if it works for you.
HTML
<div id="dd_header">
<div id="dd_items">
<ul style="list-style-type:none;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
CSS
#dd_header {
height: 20px;
width: 200px;
border: 1px solid lightgray;
}
#dd_items {
display: none;
position: absolute;
height:200px;
width: 200px;
background: #fbfbfb;}
#dd_header:hover #dd_items {display: block;}