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