我创建了一个带有输入字段的简单“无限”表单。 每次聚焦一个空输入时,它都会创建一个新输入,并且在空输入字段模糊时,该字段会被删除。
参见 example here
我使用以下代码来实现这一切:
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 中,当我切换到另一个应用程序 (⌘tab) 时,blur
事件会触发两次。这给出了一个错误,因为不可能删除节点,因为它已经消失了:
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
Firefox 似乎工作正常。
那么为什么 blur
事件会触发两次,我该如何防止这种情况发生?
编辑 - 尝试了 this question 中的答案,但没有运气。在 Chrome 中仍然收到错误消息,我做错了什么?
有没有办法检查元素是否仍然存在?因为第二次 blur
触发,节点被移除。 $(this).length
仍然是非零值。
最佳答案
请检查此 fiddle 是否具有您需要的行为, 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
关于javascript - jQuery 模糊事件在 Chrome 中触发了两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11169562/