Can I get an event if i click outside some div?

Question

I have a drop down list I did not use the HTML select element, I build it with UL. It is working fine now but I have one problem if I click the drop down it will slide down and when I select an element it will slide up. What I want to slide the list up if I click out the div of the list (without choosing any element). I wonder if I can do it using some JQuery but I do not know how to link this situation with JQuery event listener ?? can anybody help me please? This is my js file:

$('.final_dates_list li').live('click',function(){
    id = $(this).attr("id");
    if(id == 'current')
    {
        $("#dates_list").find("li").each(function(){
            //alert($(this).attr("id"));
            $(this).show();
            $(this).slideDown('slow');
        });
    }
    else
    {
        this_id = $(this).attr("id");

        $("#dates_list").find("li").each(function(){
            //alert($(this).attr("id"));
            $(this).hide();
            $(this).slideUp('slow');
        });
        $("#dates_list").find("#current").show();
    }
});

css:

div.final_dates_container ul.final_dates_list
{
    float:right;
    margin:0px;
    padding:0px;
    width:100px;
    line-height: 21px;
    overflow: hidden;
    border: 1px solid #27292c;
    border-radius: 4px;
    background: url('bg.png') no-repeat right #494849;
    box-shadow:inset 0 0 1px #393939;
    -moz-box-shadow:inset 0 0 1px #393939;
    -webkit-box-shadow:inset 0 01px #393939;
    list-style-type:none;
    color:#fff;
    font-size:0.8em;
    text-align:center;
    font-weight:bold;
    position:relative;
    z-index:9999;
}
div.final_dates_container ul.final_dates_list li:hover
{
    text-decoration:underline;
    cursor:pointer;
}
div.final_dates_container ul.final_dates_list li
{
    border-top:1px solid #eee;
}

HTML:

<div class="final_dates_container">
    <table border="1">
        <tr>
            <td>
                <ul id="dates_list" class="final_dates_list">
                    <li id='current'>0</li>
                    <li id='-6' style='display:none'>-6</li>
                    <li id='-5' style='display:none'>-5</li>
                    <li id='-4' style='display:none'>-4</li>
                    <li id='-3' style='display:none'>-3</li>
                    <li id='-2' style='display:none'>-2</li>
                    <li id='-1' style='display:none'>-1</li>
                    <li id='0' style='display:none'>0</li>
                    <li id='1' style='display:none'>1</li>
                    <li id='2' style='display:none'>2</li>
                    <li id='3' style='display:none'>3</li>
                    <li id='4' style='display:none'>4</li>
                    <li id='5' style='display:none'>5</li>
                    <li id='6' style='display:none'>6</li>
                </ul>
            </td>
        </tr>
    </table>
</div>

possible duplicate of [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) — Felix Kling, Aug 20 '13 at 11:05

score 0 · Answer 1 · answered Aug 20 '13 at 10:50

0

Try

$(document).on('click', function(){
    if($(e.target).closest('.final_dates_container').length == 0){
        //clicked outside
    }
})

answered Aug 20 '13 at 10:50

Arun P Johny

384,651
66
527
531

Rory McCrossan · Accepted Answer · 2013-08-20T10:59:05.050

0

You need to put an event handler on the document itself, and then check if the target of the event was the element you want to hide. Try this:

$(document).on('mouseup', function(e) {
    var $list = $("#dates-list");    
    if (!$list.is(e.target) && $list.has(e.target).length === 0) {
        $list.slideUp('slow');
    }      
});

Note: I used mouseup for this as there's often elements which have click hanlders with preventDefault() on them to stop propagation.

edited Aug 20 '13 at 10:59

answered Aug 20 '13 at 10:53

Rory McCrossan

331,213
40
305
339

it is so cool solution thank u very much i just want to ask about small thing if i want to show the first element of the list? what should i add after the last code? i added $("#dates_list li:first").slideDown('slow'); but not worked – Basel Aug 20 '13 at 11:24
Thank you i have figure it out – Basel Aug 20 '13 at 11:32

score 0 · Answer 3 · edited May 23 '17 at 10:31

0

use this one

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

visit this for more

edited May 23 '17 at 10:31

Community

1
1

answered Aug 20 '13 at 11:06

Lucifer

516
1
6
25

Can I get an event if i click outside some div?

HTML:

3 Answers3