Ajax 忽略加载到 dom 中的无限滚动内容

Question

我有一组 post，它们使用 foreach 加载到页面中，并利用 Laravel 的分页功能，因此我可以无限滚动 post。每个 post 都有一个独特的形式，第一个 posts 没有加载 js scroll 使用 ajax 提交很好，但是 posts 使用 JScroll 加载，似乎不适用于 ajax，它只是加载表单操作而不是返回 false 的表单。

Ajax形式post

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

这似乎是因为 post 是在页面加载后插入的， ajax post 没有选择它所以表单在加载时提交 post直接开始行动。我尝试将 ajax 插入回调函数，但这只会创建重复的 post 请求，这是毫无意义的，我尝试重新加载具有相同结果的 ajax 脚本。将不胜感激，因为我找不到与此相关的任何信息。

Answer 1

把你的点击函数改成这个

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

            }
        });
    });
});

这将允许 jQuery 将点击事件绑定到初始页面加载后加载的元素。您可以使用除 body 之外的另一个元素，该元素与您尝试提交的表单更接近，以减少运行时间，只要该元素在初始加载时位于页面上并且不会被删除。

Ajax 忽略加载到 dom 中的无限滚动内容

Ajax ignoring infinite scroll content loaded into the dom

javascript

jquery

infinite-scroll