6

クリック機能があります...

$('.rx').children().on('click',function(){alert('got here');});

私のdiv（ページ上のこれらのdivセットの50）...

<div class="rx"><div id="'.$data_string.'" class="'.$button_image_class.'"><a  href="#" ></a></div></div>

（それぞれがcssスプライト画像ボタンであり、ID内の$data_stringを関数"process_me"に送信します。process_meの呼び出しをalert（'got here'）;に置き換えました。この質問については、$button_image_classを参照してください。メンバーのアカウントに応じて特定の画像が読み込まれるため、は可変です）

上記のdivの多くをロードするためにページ付けを使用するまではすべて美しく機能します（別の50、まったく同じバー$ data_string、とにかくすべてのdivで異なります）。

最初の50divのスプライト画像ボタンリンクは、本来の方法で機能します。クリックすると、「ここに移動」というプロンプトが表示されます。ただし、新しくロードされたdivセットのリンクは機能しません。

DOMが新しい要素を取得していないためだと最初に推測しましたが、.on（'click'、function（）...は将来の要素を取得することになっています。したがって、今はそれが何かであると考えています。

$('.rx').children().on('click',function(){alert('got here');});

私が間違ったことをした。

そこに何か突き出ていますか？

4

3 に答える 3

9

いいえ、委任されたイベント.onを使用しない限り、既存の要素にのみバインドされます。

オプション1

clickコールバックで新しく追加された要素のイベントにバインドします（要素がDOMに追加された後）。

$.ajax({
    ...
}).done(function(){
    $('.rx').children().on('click', function() { 
        alert('got here');
    });
});

オプション＃2

コンテナにバインドする委任されたイベントを使用します。

$(document).on('click', '.rx > *', function() { 
    alert('got here');
});

注：セレクターのアスタリスクを、子と一致する実際の要素タイプまたはクラスに置き換えることをお勧めします。セレクターでアスタリスクを使用することは、可能な限り避ける必要があります。.rx上記のもう1つの改善点は、直接バインドするのではなく、より近い親を使用することです。document

于 2012-11-26T14:50:14.633 に答える
3

on（）はlive（）のエイリアスではありません。「この将来のイベントを、現在存在する指定している要素で指定しているこれらの子にバインドする」と書かれています。

$('.rx').on('click', '*', function(){alert('got here');});

<div class="rx...>しかし、それが動的に作成されているのが全体である場合、その中の要素ではありません

$(document).on('click', '.rx > *', function(){alert('got here');});
于 2012-11-26T14:50:05.043 に答える
0

委任されたイベントを使用する必要があります。一言で言えば、DOMへの変更を「監視」するためにjqueryのコンテナ要素を指定する必要があります。つまり、on（）関数の構文は少し異なります。

$('body').children().on('click', '.rx',function(){alert('got here');});

これは、本体を監視し（実際には、より具体的な要素を使用する必要があります）、「rx」クラスの要素を見つけることを意味します。これで、本体にjavascriptによって動的に挿入された新しい要素がある場合、それらにもアラートが送信されます。

詳細については、こちらのjQueryドキュメントを確認してください。

于 2012-11-26T14:50:19.017 に答える