0

私のページにはこのjQueryコードがあります。これは基本的<td>に、サーバーの応答に基づいてテーブル内のにいくつかの処理を実行します。

 $('document').ready(function() { 
    $('td a').click(function(e) {
        e.preventDefault()
        var href = $(this).attr('href');
        $.ajax({
            url: href,
            success: function() { 
              [...] // SKIPPED, DO STUFF HERE. 
            },
           }
        );
    })
 })

それはかなりうまく機能します....1つの問題を除いて。<td>最初にロードされたエントリでのみ機能します。

エンドレスページネーション（グーグル画像スタイルやツイッタースタイルなど）を使用すると、いくつかのAJAXアクション（ボタンのクリック、一番下へのスクロールなど）の後にさらに多くのエントリが読み込まれ、新しく読み込まれたエントリは機能しませんドル記号は機能します。

<td>すべてのエントリで機能させるにはどうすればよいですか？

4

4 に答える 4

0

次のコードを実行する必要があります

$(document).on('click', 'td a',function(e) {
    e.preventDefault()
    var href = $(this).attr('href');
    $.ajax({
        url: href,
        success: function() { 
          [...] // SKIPPED, DO STUFF HERE. 
        },
       }
    );
})
于 2013-02-22T05:29:31.607 に答える
0

.on()将来の要素もバインドするメソッドを使用します。

  $('td').on('click', 'a', function(e) {
    ...
  });
于 2013-02-22T05:33:25.663 に答える
0

これは明らかな問題ですevent delegation：

この行を変更するだけです：

 $('td a').click(function(e) {

これに：

$(document).on('click', 'td a', function(e) {
于 2013-02-22T05:33:31.677 に答える
0

の動的形式を使用して、.on()委任されたイベント処理を使用して、セレクターに一致するすべての新しく作成された要素のイベントを処理できるようにする必要があります。

一般的な形式は次のとおりです。

$(static parent selector).on("click", "td a", function(e) {});

静的な親セレクターは、動的に追加された要素の親である必要があります。この要素自体は動的ではなく、最初のjQueryの実行時に存在します。最高のパフォーマンスを得るには、動的要素にできるだけ近づける必要があります。この場合、最初のjQueryコードの実行時にテーブルDOMオブジェクトがすでに存在している限り、テーブル自体である可能性があります。

これらの同様に回答された質問を参照してください。

ダイナミックHTMLのロード後にクリックイベントを追加するためのjQuery.live（）と.on（）メソッド

新しく追加されたDOMでライブクリックイベントを作成する方法

jQuery .onは機能しませんが、.liveは同様に回答された質問に対して機能します。

于 2013-02-22T05:33:38.707 に答える