JQuery Blur() On Chrome Not Working

I'm on MacOSX running this http://jsfiddle.net/q84wv/ on Chrome latest version. It won't work, while running that on Firefox it works perfectly, any clue?

Solution 1:

Assuming that you want the alert() to be triggered either when the user tabs out from the anchor, or completes a click event, this should work:

$('.menu a').on('blur mouseup',function(){
    alert('oh');
});

Check this jsFiddle.

It really depends what you're classing as blur here. If you're wanting it to trigger whenever the user's mouse leaves the element, you can use mouseleave instead:

$('.menu a').on('blur mouseleave',function(){
    alert('oh');
});

Solution 2:

you must first focus then blur

$('.menu a').click(function() {
  $(this).focus();
});

$('.menu a').on('blur',function(){
    alert('oh');
});

jsFiddle

Solution 3:

Well for that first you have to apply blur and blur the menu out.

$('.menu a').click(function() {
  $('.menu a').blur();
});

$('.menu a').on('blur',function(){
    alert('oh');

  });

You were trying to alert if that menu has been blurred. But you were not blurring it. That's why it was not working.

FIddle : http://jsfiddle.net/q84wv/4/

Now click on the menu item(s) and you will find the alert coming up .