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

Question

我有一组使用 foreach 加载到页面中的帖子，并利用 Laravel 的分页功能，因此我可以无限滚动浏览帖子。每个帖子都有一个独特的表单，第一个没有加载js滚动的帖子使用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 () {

            }
        });
    });
});

滚动

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

把你的点击功能改成这个

$(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 将 click 事件绑定到在初始页面加载后加载的元素。您可以使用除 body 之外的另一个元素，该元素与您尝试提交的表单更接近，以减少运行时间，只要该元素在初始加载时位于页面上并且不会被删除。