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

Question

我用输入字段创建了一个简单的“无限”形式。 每次聚焦空输入时都会创建一个新输入，并且在空输入字段模糊时，该字段将被删除。

见这里的例子

我使用以下代码来实现这一切：

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

});

但问题是，在Chrome中，当我切换到另一个应用程序时， blur事件会被触发两次（ ⌘ 标签 ）。 这会产生错误，因为它不可能删除节点，因为它已经消失了：

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 

Firefox似乎工作正常。

那么为什么blur事件被触发两次，我该如何防止这种情况发生呢？

编辑 - 在这个问题中尝试了答案，但没有运气。 仍然在Chrome中收到错误消息，我做错了什么？

看到更新的小提琴

有没有办法检查元素是否仍然存在？ 因为第二次blur触发节点被删除。 $(this).length仍然是非零。

Answer 1

请检查这个小提琴是否具有您需要的行为， 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