Ajax忽略無限滾動內容加載到dom

我有一組使用foreach加載到頁面的帖子，並利用Laravel的paginate功能，所以我可以無限滾動瀏覽帖子。每篇文章都有一個獨特的形式，沒有加載js scroll的第一篇文章使用ajax提交，但是使用JScroll加載的文章似乎不適用於ajax，它只是加載表單操作而不是該表單返回false。Ajax忽略無限滾動內容加載到dom

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插入回調函數，但是這只是創建重複的post請求，這是毫無意義的，我試着重新加載具有相同結果的ajax腳本。一個修復將不勝感激，因爲我找不到任何關於這個。

來源

2017-04-11 stepho

更改您的點擊功能這個

$(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之外，您可以使用另一個元素，與您嘗試提交的表單比較接近，以減少運行時間，只要該元素在初始加載時位於頁面上並且不會被刪除。

來源

2017-04-11 15:57:05

我在一小時的搜索中沒有遇到過這種情況，這種情況超出了我的想法，完美地工作，謝謝。我猜這適用於所有其他jquery腳本，我使用foreach循環中加載的元素？例如addClass – stepho

在初始加載頁面後加載的任何元素都必須具有類似這樣的事件來將事件綁定到它們。 –

Ajax忽略無限滾動內容加載到dom

回答

相關問題