jQuery event triggers twice

Question

Can someone explain to me why this event triggers twice? It doesn\'t seem to do it on jQuery versions prior to 1.7.

Answer 1

Edit: This might be a solution to your problem.

JSFIDDLE http://jsfiddle.net/SvqwF/7/

Based on focusout.

---

You trigger it twice, because the .blur() is trigger to

.on('blur focusout', function(){}) (Thanks to @Arun P Johny)

which just triggers the event listener you added inline also, if you do not pass a function to .blur(). JSFIDDLE

Since you added a function inline, that function gets triggered twice.

Description: Bind an event handler to the "blur" JavaScript event, or trigger that event on an element. jQuery .blur()

To get more about the method (for old IE .attachEvent) that is involved with jQuery:

To register more than one event listener for the target, call addEventListener() for the same target but with different event types or capture parameters. MDN

Note: I am unsure as to which event to declare in .on(), it seems like all work

The focus and blur events are specified by the W3C to not bubble, but jQuery defines cross-browser "focusin" and "focusout" events that do bubble. When "focus" and "blur" are used to attach delegated event handlers, jQuery maps the names and delivers them as "focusin" and "focusout" respectively. jQuery .on()

Note 2: blur() <- empty is a shortcut for trigger('blur'). JSFIDDLE