2

Firefox ではなく、Chrome で次の動作が発生することがわかりました。

入力要素があります。

  • 「変更」イベントハンドラを持っています
  • ユーザーがバックスペースを入力し、要素のコンテンツが何もない場合、その要素が削除される「keydown」イベントハンドラーがあります。
  • これらの 2 つのハンドラーはラッパー要素にバインドされ、イベント ハンドラーは委任されたハンドラーとして jQuery.on 関数を使用してアタッチされます。

Chrome では、もし私が

1) 入力ボックスをクリックし、入力ボックスにテキストを入力して、フォーカスを外します。

  • change イベントハンドラが呼び出されます。

2) 入力ボックスをクリックし、バックスペースを入力してすべての内容を削除し、もう一度入力してその入力ボックスを削除します。

  • 次に、ターゲットの入力 dom が削除されても、変更イベント ハンドラーは引き続き呼び出されます。

Firefox では、バックスペース キーダウンによりボックスが削除された場合、変更イベント ハンドラーが呼び出されません。

私のブラウザだけですか？またはjQueryのバグ？またはブラウザの実装バグ??

私はjsfiddleで簡略化されたコードを書きました.. http://jsfiddle.net/RbAua/6/

4

1 に答える 1

0

bind()on change イベントを使用すると、期待どおりに動作します。

メソッドに関連するバグのようですon()。なぜ前回すべてが .on() を単一の要素に対しても使用するのか理解できません!

    http://jsfiddle.net/RbAua/9/

$('#wrap').on('keydown','#input',function(event){
    if(event.keyCode == 8){ // backspace
        if($(this).val().length == 0){
            $(this).remove();
            $('#txt').append('<div> removed! </div>');
            event.preventDefault();
        }
    }
});


$('#wrap #input').bind('change', function(){
    $('#txt').append('<div> changed! to [' + $(this).val() + '] </div>');
});

jquery をデバッグすると、イベントが on() または live() で適用された場合、要素にイベント データがキャッシュされていないためCleanData()、期待どおりに動作しないことがわかりました。この場合、FF がすぐに期待どおりに動作することがさらに奇妙です.

私はこれの回避策を見つけました。アイデアは、目に見える要素にのみバインドすることです。そのため、削除する前に hide() を作成すると、変更が発生しなくなります。

var onchange = function(e) {
    $('#txt').append('<div> changed! to [' + $(this).val() + '] </div>');
};

$('#wrap').on('keydown', '#input', function(event) {
    if (event.keyCode == 8) { // backspace
        if ($(this).val().length === 0) {
            var that = $(this);

            var onchange1 = onchange;
            that.hide();
            that.remove();
            $('#txt').append('<div> removed! </div>');
            event.preventDefault();
        }
    }
});



$('#wrap').on('change', '#input:visible', onchange);​

http://jsfiddle.net/RbAua/12/

于 2012-10-13T09:50:51.360 に答える