单击li时未触发jQuery的.blur（）

Question

So we have a <ul> which contains several <li> s, and a <textarea> . The <textarea> has a .blur() event handler which works as expected when clicking outside. However, if I set focus on the <textarea> , then click on one of the <li> s to make the <textarea> lose focus, .blur() is not fired. Any idea why this happens and how to make it work?

Code:

$("textarea").blur(function(e) {
// Do something
});

By the way, the <li> has no .click() handler.

Environment: Mac OS X 10.9, Chrome 46.

Answer 1

Only a few browsers support/detect the blur event on non-form elements. But, of course, you can always trigger an event by yourself or as a reaction. See here: jsfiddle

<textarea></textarea>
<div>here is the div</div>
<strong>here is the strong</strong>

$('textarea').blur(function() {
    alert('ta blur');
});
$('div').blur(function() {
    alert('div blur');
});
$('strong').blur(function() {
    alert('strong blur');
});

$(document).ready(function() {
    $('strong').trigger('blur');
});