CODEWITHSUNDEEP
javascriptjquery
Snake Eyes
Snake Eyes

Reputation: 16764

Jquery blur doesn't work in Firefox and Chrome but works in IE9

I have this HTML code which simulates a dropdown multi-checkbox

<div>
   <div class="select">
       <span>Select something</span>
   </div>
   <div class="no-display select-list">
       <div>
          <label class="unchecked" for="value1">
             Value1
          </label>
          <label class="unchecked" for="value2">
             Value2
          </label>
       </div>
   </div>
</div>

And javascript:

  $(".select").live("click", function () {
     $(".select-list").toggleClass("no-display").focus();
  });

  $(".select-list").live("blur", function () {
     $(this).addClass("no-display");
  });

But in Firefox and Chrome, the blur event doesn't work, but works in IE9.

I want, when clicking outside select-list element, to close it (means make it invisible).

I used blur event after assigned focus on that element.

Could you show me the good approach to do that ?

Thanks

Upvotes: 2

Views: 3203

Answers (3)

Omer Prizner
Omer Prizner

Reputation: 134

Set attribute tabindex=-1 on the select-list div(read about "tabindex" property).

Upvotes: 0

Salman Arshad
Salman Arshad

Reputation: 272106

Try trapping a click on the document to hide the menu. The clicks from the menu will also propagate to the document so you'll need a work around for that (you can check event.originalEvent for example).

Demo here

Upvotes: 0

Anders Marzi Tornblad
Anders Marzi Tornblad

Reputation: 19305

Try using on("focusout", instead of on("blur"),, because the blur event doesn't always get triggered.

Upvotes: 1

Related Questions