This Show/Hide function doesn't work when click on an unordered (ul) list

Question

I am styling a few MultiSelect elements with unordered (<ul>) HTML lists and this function is meant to hide the element when a user clicks anywhere on the document other than 'dropdown_box' or 'dropdown_container'.

The function isn't working for anything within the <ul>tags, and it's hiding the element as soon as soon as a list item is clicked. I've tried specifying both the id of the <div> as well as the <ul> and it still closes as soon as it's clicked.

UPDATE - I created a jsfiddle to demonstrate the problem http://jsfiddle.net/chayacooper/ezxSF/16/

There is a separate mouseleave function which closes the element for most uses, but I need to add this functionality in order to close the element if the user clicks to open it but doesn't mouse over any of the 'UL Element' items.

JS

$('html').click(function (e) {           
    if (e.target.id == 'dropdown_box' || e.target.id == 'dropdown_container') {
        $("#select_colors").show();
    } else {
        $("#select_colors").hide();
    }
});

HTML

<div id="dropdown_box">Select</div>
<div id="dropdown_container"> 
    <ul id="select_colors"> 
        <!-- Several List Item Elements --> 
    </ul>
</div>

Not enough information. Please recreate the problem on jsfiddle.net — Samuel Liew, Mar 08 '13 at 02:58
Your click event is bubbling up and you're catching it too late. — j08691, Mar 08 '13 at 03:00
@j08691 - Would you mind elaborating on that and showing me how to resolve it? — Chaya Cooper, Mar 08 '13 at 03:30

score 2 · Accepted Answer · edited May 23 '17 at 11:57

2

I would do this a different way. Attach a global click handler to "body" that hides the div, and attach a click handler to your dropdown_box and dropdown_container that stops the propagation of the event (by returning false and calling e.stopPropagation). This way the body event handler will never see the event.

$('html').click(function () {$('#select_colors').hide(); });
$('#dropdown_box, #dropdown_container').click(function (e) {
    e.stopPropagation();
    return false;
});

UPDATE changed body to html, and hid the "select_colors" instead of the dropdown_container.

http://jsfiddle.net/KJmtG/

Some references:

http://www.quirksmode.org/js/events_order.html

Event propagation in Javascript

edited May 23 '17 at 11:57

Community

1
1

answered Mar 08 '13 at 03:00

Jared Forsyth

12,808
7
45
54

I think you're on the right track, but something's still not right because the element no longer closes when I click elsewhere on the page. I created a jsfiddle with my original code, if you wouldn't mind taking another look at it http://jsfiddle.net/chayacooper/ezxSF/16/ – Chaya Cooper Mar 08 '13 at 03:34
that should do it for you. See the jsfiddle I created – Jared Forsyth Mar 08 '13 at 03:39

score 2 · Answer 2 · answered Mar 08 '13 at 03:38

2

Try this:

$('html').click(function () {
    $("#select_colors").hide();
});
$('#dropdown_box, #dropdown_container').click(function (e) {
    e.stopPropagation();
    $("#select_colors").show();
});

jsFiddle example

Clicking on the html will hide the list, while clicking on #dropdown_box or #dropdown_container will show it and stop the event bubbling.

answered Mar 08 '13 at 03:38

j08691

204,283
31
260
272

It's exactly what I needed, but @JaredForsyth beat you to it :-) I'm feeling the love here tonight, and wish I could accept both answers :-) – Chaya Cooper Mar 08 '13 at 03:53

This Show/Hide function doesn't work when click on an unordered (ul) list

2 Answers2