CODEWITHSUNDEEP
htmljquery
SNag
SNag

Reputation: 18141

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

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

Upvotes: 0

Views: 2292

Answers (7)

Fr0zenFyr
Fr0zenFyr

Reputation: 1929

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

Upvotes: 0

Jai
Jai

Reputation: 74738

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

Upvotes: 1

Syed Osama
Syed Osama

Reputation: 133

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

Upvotes: 0

Mr.G
Mr.G

Reputation: 3559

Try this:

$(document).ready(function(){
       $("#dd_items").hide();

       $("#dd_header").click(function () {
          $("#dd_items").show();
       });

       $("#dd_items").mouseleave(function () {
          $("#dd_items").hide();
       });
    });

Upvotes: 0

Dharmesh Patel
Dharmesh Patel

Reputation: 1891

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

Upvotes: 0

codingrose
codingrose

Reputation: 15699

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.

Upvotes: 0

user2826254
user2826254

Reputation: 116

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

Upvotes: 4

Related Questions