domにロードされた無限のスクロールコンテンツを無視するAjax

Question

私は、foreachを使用してページにロードされる一連の投稿を持っており、Laravelでpaginate関数を利用するので、投稿を無限にスクロールできます。それぞれのポストはユニークなフォームを持っていますが、js scrollでロードされていない最初のポストはajaxを使ってうまくいきますが、JScrollでロードされたポストはajaxで動作しないようです。フォームはfalseを返します。そのフォームは上の提出

Ajaxのフォームポスト

$(function() { 
    $('.vote-btn').on('click', function (e) { 
     e.preventDefault(); 
     $.ajax({ 
      type: 'post', 
      url: '/notes/vote', 
      data: $(this).parent('form').serialize(), 
      success: function() { 

      } 
     }); 
    }); 
}); 

Jscroll

$(function() { 
    $('.notes-content-con').jscroll({ 
     autoTrigger: true, 
     loadingHtml: '<img src="{{URL::asset("images/ellipsis.gif")}}" alt="Loading" class="paginate-load" />', 
     nextSelector: '.pagination li.active + li a', 
     contentSelector: 'div.notes-content', 

     callback: function() { 
      $('ul.pagination:visible:first').hide(); 
     } 
    }); 
    }); 


    <div class="notes-content-con"> 
    @foreach ($notes as $note) 
     <div class="notes-content"> 

       <p>{{$notes->body}}</p> 

       <form action="/vote" method="post" id="vote-form"> 
       <input type="submit" class="vote-btn"> 
       <input type="hidden" name="note-id" value="{{$note->id}}"> 
       </form> 

     </div> 
    @endforeach 
    </div> 

ポストは、ページのロード後に挿入されているためと考えられる

、Ajaxのポストはそれを拾うていませんロードされたポストはアクションにまっすぐに進みます。私はコールバック関数にajaxを挿入しようとしましたが、それは無意味な重複した投稿要求を作成する、私は同じ結果を持っているajaxスクリプトをリロードしようとしました。私はこれに関する何かを見つけることができないので、修正は高く評価されるだろう。

Answer 1

これは、jQueryのは、最初のページのロード後にロードされている要素にクリックイベントをバインドすることができます。この

$(function() { 
    $('body').on('click', '.vote-btn', function (e) { 
     e.preventDefault(); 
     var $this = $(this); 

     $.ajax({ 
      type: 'post', 
      url: '/notes/vote', 
      data: $this.parent('form').serialize(), 
      success: function() { 

      } 
     }); 
    }); 
}); 

にあなたのクリック機能を変更し

。 bodyのほかに、要素が最初の読み込み時にページにあり、削除されない限り、実行時間を短縮するために提出しようとしているフォームに相対的に近い別の要素を使用できます。