0

こんにちは、codeigniter を使用して ajax 無限スクロールを構築しました。その ajax スクロールにコメント フォームがある場合、私の懸念は、ページが読み込まれるときに 10 件の投稿が読み込まれ、下にスクロールすると別の 10 件の投稿が読み込まれ、20 件の投稿すべてに独自のコメント フォームが含まれることです。コメントを投稿するために ajax を使用しています。そのため、ページが読み込まれたコメントフォームが読み込まれたときに読み込まれる最初の 10 件の投稿では機能しますが、ajax で読み込まれた投稿のコメントフォーム ajax 投稿は機能しません。以下は私が使用しているコードです。

<script type="text/javascript">
$('.post_comment').click(function() {
  var form_data = {
    csrfsecurity: $(this).parent().find("input[name=csrfsecurity]").val(),
    post_text: $(this).parent().find('.comment_text').val()    
  };

  $.ajax({
    url: "<?php echo site_url('/comment'); ?>",
    type: 'POST',
    data: form_data,
    success: function(response){
      $(".home_user_feeds").html("markUpCreatedUsingResponseFromServer");
    }
  });
  return false;
});
</script>

ページを下にスクロールすると、以下のフォームが 10 回読み込まれます。

<form action="http://localhost/comment" method="post" accept-charset="utf-8">
<input type="text" name="comment_text" value="" id="comment_text" size="35" class="comment_text">
<input type="submit" id="post_comment" name="post_comment" value="submit comment" class="post_comment" >
</form>
4

1 に答える 1

0

私の推測では、AJAX を使用している HTML にイベント リスナーを追加していないということです。ドキュメントの読み込み時に元の 10 のイベント リスナーを追加しているため、最初の 10 は機能します。

jquery コードを実行して、イベント ハンドラーを DOM 要素 (クラス pos​​t_comment を持つ要素のように見えます) に再度クリック イベントを追加する必要があります。

于 2013-03-04T19:31:51.040 に答える