blur() is not fired on Chrome and Safari when focus is removed.

[kadishmal]

I have an HMTL with the following structure:

<div class="project" id="project-6">
	<input type="text" class="name" value="asd asdfasdf" /></div>
<div class="project" id="project-7">
	<input type="text" class="name" value="asd asdfasdf" /></div>
...

The input field has two events which should fire either onFocus or onBlur:

function addProjectEvents(input, projectId)
{
	input.focus(function(){
		input.parent().addClass('active');
	})
	.blur(function(){
		input.parent().removeClass('active');
	});
}

When I focus all browser fire onFocus(), as the "active" class is added which changes the background of the parent "project" div. When the focus is moved to the next input, the current focused input should fire onBlur(), while the new focused input should fire onFocus().

The bug is in Chrome and Safari when onFocus() is fired, which adds the "active" class to the new project div, but the old project div does not remove "active" class, which means it does not fire the onBlur() event at all. I use Chrome 10.0 and Safari 5.0.4.

[kadishmal]

I have just found an interesting solution on ​StackOverflow. It suggested to use live() function for input fields.

input.live('focus', function(){
	input.parent().addClass('active');
})
.live('blur', function(){
	input.parent().removeClass('active');

	if (input.val() != jQuery.data(input, 'name')){
		saveProject(projectId, input);
	}
});

So, I wonder if it is a bug or this is the normal behavior.

[kadishmal]

I just found out that the above solution with live() is not a solution for this case. So it's still assumed as a bug.

The thing is live() allows to bind events on any newly created elements. I do not need that as I call addProjectEvents() function every time I create an element. So, I do not need live() as I bind myself explicitly, but anyway, blur() event is not fired on Chrome and Safari.

[addyosmani]

Thanks for taking the time to contribute to the jQuery project! Please provide a (complete) reduced test case on ​http://jsFiddle.net that reproduces the issue experienced to help us assess your ticket.

Additionally, test against the jQuery (edge) (ie 1.6 beta) version to ensure the issue still exists.

[trac-o-bot]

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

[chrisbloom7@…]

Just take a look at the demo at the bottom of ​http://api.jquery.com/focusout/ in Chrome. The blur count is never updated.

[chrisbloom7@…]

In contrast, native blur() seems to work fine in Chrome. See preview at ​http://help.dottoro.com/ljokdwpx.php

[dmethvin]

Please don't post unrelated questions on long-dead tickets.

I suppose we need to make it excruciatingly clear that blur should not fire in the example and of course it does not. The W3C says blur event doesn't bubble. Even the reference you linked says "The blur method has no effect on an element that is not the active element in the document" and the paragraph is NOT the active element--the inputs are.

​https://github.com/jquery/api.jquery.com/issues/268

Again, please do not post questions, inquiries, comments, or questions on tickets that were closed long ago.