2

こんにちは私は、チェックボックスを使用して選択リストとして機能するテーブルを動的に作成しています。これらのチェックボックスを相互に排他的にしたいと思います。したがって、チェックボックスをオンにしたら、他のチェックボックスをオフにする必要があります。

$(document).on("keydown", "#list_Instructors input.allocate",function(event){   
    alert("hit");
    $("#list_Instructors input.allocate").removeAttr('checked');
    $(event.target).attr('checked', 'checked');
});

この種の作業は機能しますが、クリックしてから何かが起こるまでに大きな遅延があり、それは良くありません。私はあらゆる種類の組み合わせを試しましたが、成功しませんでした。

これが遅延を引き起こしている理由についての簡単な説明はありますか？

4

3 に答える 3

2

あなたの問題はあなたが本当に悪いDOM全体のメソッドにバインドすることです。したがって、常にそれを、コントロールが存在する最も近いdiv（最も近い親要素）にバインドするようにしてください。

そして2つ目は、パフォーマンスを向上させるためにセレクターを常にキャッシュすることです。

var dataTable=$('#dataTable');

dataTable.on("click", function(event){
    alert($(this).text());
});

JqueryAPIからのイベントパフォーマンスについては以下のようになります。

ドキュメントツリーの最上位近くに多くの委任されたイベントハンドラーをアタッチすると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQueryは、そのタイプのすべてのアタッチされたイベントのすべてのセレクターを、イベントターゲットからドキュメントの先頭までのパス内のすべての要素と比較する必要があります。最高のパフォーマンスを得るには、ターゲット要素にできるだけ近いドキュメントの場所に委任されたイベントを添付します。大きなドキュメントの委任されたイベントにdocumentまたはdocument.bodyを過度に使用することは避けてください。

于 2012-12-22T08:58:13.753 に答える
1

表示される可能性があるのは、アラートボックスが閉じられるまで、その後のコードは実行されないということです。alertコマンドはブロックコマンドです。

console.log()おそらく、この機能のデバッグ目的で使用できます。これはコードをブロックせず、keydownイベントで実行されます。

于 2012-12-22T08:42:58.677 に答える
1

$(this)別のルックアップを行う代わりに使用する必要があります。また、上記のように、コンテナ div など、可能であれば最も近い親要素にバインドしてみてください。そうは言っても、これはあなたを少しスピードアップするはずです：

$(document).on('keydown', '#list_Instructors input.allocate', function (event) {   
    //alert("hit");
    console.log('hit');
    $(this).removeAttr('checked');
    $(event.target).attr('checked', 'checked');
});

documentただし、コンテナ div または別の親要素に置き換えるようにしてください。

于 2012-12-22T09:05:57.933 に答える