2

質問を明確にしたいと思います。

ページの読み込み時にイベントハンドラーを登録するためのチェックボックス（またはその他のタイプの要素）があるとします。次に、AJAXを使用してさらにいくつかのチェックボックスを追加します（したがって、ページのリロードはありません）。しかし、これらの新しく追加されたチェックボックス（ページがロードされた後）に同じ登録済みイベントハンドラーを持たせたいですか？

私が試したのはこれでしたが、もっと良いアプローチが必要だと感じています。

$(document).ready(function () {

  // Register custom envets handler
  registerCustomEventHandlers();

  $('a').on('click', addExtraFields);
});

function registerCustomEventHandlers() {
  $('input.class_name').on("change", sayHelloWorld);
}

function sayHelloWorld() {
  alert('Hello world');
}

function addExtraFields() {
  // insert some checkboxes...

  // register the events handler again for the newly added fields
  registerCustomEventHandlers();
}

したがって、基本的にチェックボックスを追加する関数内で、すべてのイベントハンドラーを再度登録します。私はこのようなものを見ていました$(document).change(function() {});が、どうやらそれはすべてのブラウザでサポートされているわけではありません...

助言がありますか？

4

4 に答える 4

2

イベントを代わりにデリゲートして、document将来のすべての入力にも適用されるようにすることができます。はいつでも利用できるdomReadyので、イベントに入れる必要さえありません。document

$(document).on("change", "input.class_name", sayHelloWorld);

function sayHelloWorld() {
    alert('Hello world');
}

function addExtraFields() {
    // insert some checkboxes, they will have the same handler attached when inserted
}

デモ: http://jsfiddle.net/gdX3R/1/

于 2012-07-10T12:12:13.977 に答える
1

これらの理由から、ライブセレクターを使用しないことをお勧めします

簡単に要約すると、すべてのクリックイベントを台無しにするため、パフォーマンスの問題です。

代わりに、投稿で説明されているように、入力の最も低い共通の親要素 (おそらくフォーム) のようにデリゲートを使用してください。

$('#yourFormId').delegate('.class_name', 'click', function() { 
   // what you want to do
});

ここでjsfiddleを見つけることができます

また、input.class_name のようなセレクターを使用しないでください (そのクラス名を持つ入力以外の要素がない限り)。クラスで選択するだけでなく、フォーム内のすべての入力をループしてそのクラスの要素を検索するため、.class_name よりも遅くなります。

于 2012-07-10T12:33:11.440 に答える
0

jquery 1.4 の時点では、いつlive()でもhttp://api.jquery.com/live/も使用できます。これにより、現在および将来、一致する要素にハンドラーをアタッチできます。

于 2012-07-10T12:12:45.210 に答える
0

これが Jquery で行われる方法は、ハンドラーを作成するときにオブジェクトが存在する必要がないようなものです。

あなたが使用することができます：

$(document.body).on("click", "input[type='checkbox']", 
   function(){alert($(this))}
);

これは、タイミングに関係なく、ページに追加された新しいチェックボックスに適用されます。

于 2012-07-10T12:13:19.003 に答える