StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery blur event fired twice in Chrome
text
Body
copied!<p>I created a simple 'infinite' form with input fields. Every time an empty input is focused it creates a new one, and on blur of an empty input field, the field is removed.</p> <p>See <a href="http://jsfiddle.net/EPxkh/" rel="nofollow noreferrer">example here</a></p> <p>I use the following code to make it all happen:</p> <pre><code>var $input = $('<div/>').html( $('<input/>').addClass('value') ); $('form').append( $input.clone() ); $('form').on( 'focus', 'input.value', function(e) { // Add new input if the focused one is empty if(!$.trim(this.value).length) { $('form').append( $input.clone() ); } }).on( 'blur', 'input.value', function(e) { var $this = $(this); if( !$.trim(this.value).length ) { console.log('REMOVING INPUT'); $this.parent().remove(); } else { $this.attr('name', 'item-'+$this.val()); } }); </code></pre> <p>The problem is however, that in Chrome the <code>blur</code> event is fired twice when I switch to another application (<kbd>⌘</kbd><kbd>tab</kbd>). This gives an error, because it is not possible to remove the node, since it's already gone:</p> <pre><code>Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 </code></pre> <p>Firefox seems to work fine.</p> <p>So why is the <code>blur</code> event fired twice and how can I prevent that from happening?</p> <p><strong>EDIT</strong> - Tried the answer in <a href="https://stackoverflow.com/questions/9649966/chrome-maybe-safari-fires-blur-twice-on-input-fields-when-browser-loses-foc">this question</a>, but no luck. Still get the error message in Chrome, what am I doing wrong?</p> <p><a href="http://jsfiddle.net/EPxkh/3/" rel="nofollow noreferrer">See updated fiddle</a></p> <p>Is there a way to check if the element still exists? Because the second time <code>blur</code> fires the node is removed. <code>$(this).length</code> still is non-zero though.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload