1

ユーザーのコメントのページがあります。

$(p).click(function(){

    $(this).hide(200);
});

ユーザーがコメントをクリックすると、通常、このコメントは消えます。それは完全に動作します。

しかし、ユーザーがサーバーの応答で同じことをすると、これはもう機能しません

サーバーの応答は、テーブルで見つかった一連の次のコメントです (つまり、カスタム AJAX ページネーター)

サーバーの応答は次のようになります。

<p id="next-id1">bla bla bla 1</p>
<p id="next-id2">bla bla bla 2</p>

次に、この応答は、mysql テーブルの最初のコメントを含む特定の div の後にコンテンツを挿入します

このような：

$("#snow-next-btn").click(function(){

$.post('/paginator.php', {}, function(response){

    $("#comment-div").after(response);

});

});

私が言ったように、それは完全に機能します。しかし、この方法：

$(p).click(function){
    $(this).hide(200);
}

サーバーの応答では機能しなくなりました (ただし、ページの読み込み時に php によって出力されたコンテンツでは引き続き機能します)。

問題はどこだ？

4

2 に答える 2

1

イベントハンドラーは、サーバーの応答から挿入される新しい要素にバインドされていません。を使用する代わりに、 ：を使用$.click()します。$.on()

$(document).on("click", "p", function(){
  $(this).hide( 200 );
});

新しい要素が入ってくると、それらはあなたのためにバインドされます。他の唯一の解決策は、サーバーの応答からドロップインするときに、ハンドラーを常に新しい要素にバインドすることです。気楽に、腰を落ち着けて、jQueryに手間のかかる作業を任せましょう。

于 2012-04-25T01:27:32.810 に答える
1

パラメーター (2 番目の引数).on()と共に使用する必要があります。selector

$(document).on('click', 'p', function() {
   $(this).hide(200);
})

あなたのマークアップが見えないので、 に最も近い親はわかりませんが、 の最も近い親に置き換えpます。たとえば、あなたのマークアップは次のとおりです。documentp

<div id="bla">
   <p>...</p>
   <p>...</p>
   <p>...</p>
</div>

あなたはそれを次のように書くでしょう

$('#bla').on('click', 'p', function() {
   $(this).hide(200);
})

ドキュメントから：

セレクターが提供されている場合、イベント ハンドラーは委任されていると見なされます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫 (内部要素) に対してのみ呼び出されます。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。

于 2012-04-25T01:31:39.173 に答える