jQuery模糊事件在Chrome中被触发两次

Question

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.

See example here

I use the following code to make it all happen:

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());
    }

});

The problem is however, that in Chrome the blur event is fired twice when I switch to another application ( ⌘ tab ). This gives an error, because it is not possible to remove the node, since it's already gone:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 

Firefox seems to work fine.

So why is the blur event fired twice and how can I prevent that from happening?

EDIT - Tried the answer in this question , but no luck. Still get the error message in Chrome, what am I doing wrong?

See updated fiddle

Is there a way to check if the element still exists? Because the second time blur fires the node is removed. $(this).length still is non-zero though.

Answer 1

Please check if this fiddle is having the behaviour as you need it, http://jsfiddle.net/EPxkh/8/

http://www.quirksmode.org/js/introevents.html

http://www.quirksmode.org/js/events_order.html

http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

Answer 2

这看起来像Blink中的一个错误，在Chromium项目的页面上有关于该错误的报告： http ： //code.google.com/p/chromium/issues/detail？id = 253253