入力フィールドを持つ単純な「無限」フォームを作成しました。空の入力がフォーカスされるたびに新しい入力が作成され、空の入力フィールドがぼやけると、フィールドは削除されます。
ここで例を参照してください
次のコードを使用して、すべてを実現します。
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別のアプリケーションに切り替えるとイベントが 2 回発生するという問題があります ( ⌘tab)。ノードはすでに削除されているため、ノードを削除することはできないため、これによりエラーが発生します。
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
Firefox は正常に動作しているようです。
では、なぜblurイベントが 2 回発生するのでしょうか?また、それを防ぐにはどうすればよいでしょうか?
編集-この質問の答えを試しましたが、うまくいきませんでした。Chrome でまだエラー メッセージが表示されます。何が間違っているのでしょうか?
要素がまだ存在するかどうかを確認する方法はありますか? 2 回目のblur起動により、ノードが削除されます。$(this).lengthそれでもゼロではありません。