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