Question

我有一组使用foreach加载到页面中的帖子，并使用Laravel的paginate函数，所以我可以无限滚动帖子。每个帖子都有一个独特的形式，第一个帖子没有加载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 () {

            }
        });
    });
});

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插入回调函数，但这只是创建了重复的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将click事件绑定到初始页面加载后加载的元素。您可以使用除body之外的另一个元素，它与您尝试提交的表单相比更接近，以减少运行时间，只要元素在初始加载的页面上并且不会被删除。

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

1 个答案: