Blur runs twice when the entire page is displayed in Google Chrome

Question

I have a dynamic textarea on a web page that jQuery is adding, and I need to detect a blur event for them.

JSFIDDLE ;

The following code works fine until the whole page is blurred (go to another tab, press Alt-Tab, etc.) when the blur event is fired twice.

 // I've already tried with another selector, parent of the textareas // instead of document, but it the same result. $(document).on("blur", "textarea", function () { $("body").append("<br />Blured the " + (($(this).index() / 2) + 1) + " textarea."); }); 

I am looking for a solution using only the on function, and not as shown below (in this case the problem exists):

 var element = $("<textarea></textarea><br />"); element.on("blur", function () { $("body").append("<br />Blured the " + (($(this).index() / 2) + 1) + " textarea."); }); ... 

JSFIDDLE ;

So the problem is that when the text field is focused and the page is blurred, the blur event is fired twice.

What is the solution for this?

Is this a problem with the browser? How to prevent this?

Update: It seems to be present only in Google Chrome .

OS: Ubuntu 13.04

---

I reported this here: http://code.google.com/p/chromium/issues/detail?id=253253

Answer 1

Another possible workaround:

http://jsfiddle.net/tpRgf/4/

 (function () { var lastActive; $(document).on("blur", "textarea", function () { if (lastActive === this) { return; } lastActive = this; $("body").append("<br />Blured the " + (($(this).index() / 2) + 1) + " textarea."); }).on('focus', "textarea", function () { lastActive = null; }); })(); 

Answer 2

A bit of a hack, but you can use a timeout to make sure the event does not fire twice:

 $("button").on("click", function () { $("#test").append("<textarea></textarea><br />"); }); $(document).on("blur", "textarea", function () { var self = $(this); if (! self.data('fired')) { $("body").append("<br />Blured the " + (($(this).index() / 2) + 1) + " textarea."); } self.data('fired', true); setTimeout(function() { self.data('fired', false); },0); }); 

Fiddle