jQueryが期待どおりに動作しないのはなぜですか？

Question

私はユーザーのコメントのページを持っています。

$(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); 

}); 

}); 

[OK]を私が言ったように、それは完璧に動作します。しかし、この方法：

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

はもうサーバー応答では動作しません（しかし、それはまだ、ページの読み込み上のPHPで印刷された内容で動作します）。

問題はどこですか？

Answer 1

pの最も近い親に、例えば、あなたのマークアップがあるので：

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

あなたは

としてそれを記述します。 docsから

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

：

セレクタが設けられている場合、イベント・ハンドラが委任 と呼ばれています。イベントが直接バインドされた要素の に発生したときにはハンドラは呼び出されませんが、 がセレクタに一致する子孫（内部要素）に対してのみハンドラが呼び出されます。

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

Answer 2

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

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

新しい要素が入ってくると、彼らはあなたのためにバインドされます。他の唯一の解決策は、サーバレスポンスからハンドラをドロップするときに常にハンドラを新しい要素にバインドすることです。簡単に座って座って、jQueryを大量に持ち上げましょう。私はあなたのマークアップを見ることができないので、私はpに最も近い親が何であるかを伝えることはできませんが、documentを代用

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

：あなたはselectorパラメータ（第二引数）で.on()を使用する必要が