Blur event is fired on focused parent element if focused element's child is clicked

javascript, jquery, jquery-events

Solution

When you click on a `<label>`, the browser focuses the associated input field. So focus leaves the parent and goes to the checkbox (and your blur event handler is called).

Instead of focusing the parent div and relying on it being blurred, attached a click handler to the document:

$(document).click(function() {
    multiSelectUpdate();
});

$('.multiselect.container').click(function(event) {
    event.stopPropagation(); // prevent click event from reaching document
});

Also, in Webkit clicking on `<select>` doesn't fire a click event. A workaround is to use the focus event instead.

Demo

Problem

I need to create a part of a form where if you click on a select, a checkbox field should popup and if you click anywhere else again, this field should disappear. I would like to do this with focusing the field after clicking on the select, but for some reason, my checkbox field loses its focus not only when you click anywhere else out of it, but even when you click on a label of a checkbox INSIDE of it. So the problem is that I am focusing an element in which I click on a label and the focused parent element loses its focus for some reason I can not figure out. The code: http://jsfiddle.net/RELuL/2/ ` ` Any helps appreciated! P.S.: Just some bonus question :) As you can see, if you click on the select input, my hidden checkbox section is displayed a little late, it is not shown instantly which looks a little bad. Any tips how to optimize this? EDIT: I use Firefox 13.0.1

Original source