-1

新しく追加されたコメントの描画を担当する小さなコードがあります。on問題は、削除された代わりに使用するコードを書き直したときにlive、ページの読み込み後に追加された新しい要素でコードが機能しないことです

これが私のコードです

$(function(){
    $('.show-comment-form').on("click", (function(){
        dataattr = $(this).data('comment');
        $('#new_comment').remove();
        $('.message-'+dataattr).append(partial_form);
        $("#comment_parent_id").val(dataattr);
        return false;
    }))
})

HTML

<a href="/phrases/52/create_comment?parent_id=16" class="show-comment-form" data-comment="16">Reply</a>

ページの読み込み後に追加されるすべての将来の要素にクリックイベントを追加するにはどうすればよいですか?

4

1 に答える 1

7

変化する：

$('.show-comment-form').on("click", (function(){

に：

$(document).on("click", '.show-comment-form', (function(){

要素を動的に追加する場合、この例では、ページに既に存在する要素を対象として使用するにはdocument、リスナーをアタッチする要素をパラメータとして に渡します.on()。

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。

また、動的に挿入される要素にできるだけ近い要素をターゲットにすることにも注意してください。

ドキュメント ツリーの最上部近くに委任されたイベント ハンドラを多数アタッチすると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQuery は、そのタイプのすべての添付イベントのすべてのセレクターを、イベント ターゲットからドキュメントの先頭までのパス内のすべての要素と比較する必要があります。最高のパフォーマンスを得るには、委任されたイベントをターゲット要素にできるだけ近いドキュメントの場所に添付します。大きなドキュメントで委任されたイベントを過度に使用しdocumentたり、委任したイベントを使用したりしないでください。document.body

于 2013-05-15T13:44:15.800 に答える