我创建了一个简单的“无限”表单,其中包含输入字段。每当焦点聚焦在空输入上时,它就会创建一个新的输入字段,并在空输入字段失去焦点时将其删除。
请参见此处的示例。
我使用以下代码使所有这些都发生:
然而问题在于,在Chrome中,当我切换到另一个应用程序(⌘tab)时,
请参见此处的示例。
我使用以下代码使所有这些都发生:
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
火狐浏览器似乎工作正常。
那么为什么blur
事件会触发两次,我该如何防止这种情况发生?
编辑 - 尝试了this question中的答案,但没有成功。在Chrome中仍然会收到错误消息,我做错了什么?
有没有办法检查元素是否仍然存在?因为第二次blur
触发时,节点已被删除。$(this).length
仍然不为零。
isTargetWindow
修复,事件的触发顺序仍然不正确 - 如果你查看 JavaScript 控制台,你会发现在 "窗口失焦" 之前你会得到两个 "移除输入" 行。我不确定如何解决这个问题,但这可能是一个需要探究的方向! - Hannele