Sự kiện jQuery blur được kích hoạt hai lần trong Chrome

Question

Tôi đã tạo biểu mẫu 'vô hạn' đơn giản với các trường nhập. Mỗi khi một đầu vào trống được lấy nét, nó sẽ tạo ra một đầu vào mới và làm mờ một trường nhập trống, trường sẽ bị xóa.

Xem example here

tôi sử dụng đoạn mã sau để làm cho nó tất cả xảy ra:

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

}); 

Vấn đề là tuy nhiên, trong Chrome sự kiện blur là bắn hai lần khi tôi chuyển sang ứng dụng khác (⌘tab). Điều này gây ra lỗi, vì không thể xóa nút vì nó đã biến mất:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 

Firefox có vẻ hoạt động tốt.

Vậy tại sao sự kiện blur được kích hoạt hai lần và làm cách nào để ngăn điều đó xảy ra?

EDIT - Đã thử câu trả lời trong this question, nhưng không có may mắn. Vẫn nhận được thông báo lỗi trong Chrome, tôi đang làm gì sai?

See updated fiddle

Có cách nào để kiểm tra xem phần tử đó có tồn tại không? Vì lần thứ hai blur kích hoạt nút bị xóa. $(this).length vẫn là khác 0.

Answer 1

Vui lòng kiểm tra nếu fiddle này là có hành vi như bạn cần nó, 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

này trông giống như một lỗi trong Blink, có một báo cáo lỗi về điều đó trên trang của dự án Chromium: http://code.google.com/p/chromium/issues/detail?id=253253