jQuery有時不起作用（Ruby on Rails）

Question

我有一個Rails 5.1.3應用程序（Facebook的克隆更精確。） 當頁面初始加載時，我觸發一個來抓取所有的「註釋「&」回覆「按鈕。這些按鈕是負責揭示評論/回覆表格。

時遇到的問題是這樣的，當我使用分頁抓取與阿賈克斯額外的帖子，我再次觸發完全相同的功能，這次命名爲updatebuttons()，但有時它的工作原理，有時不。

這是我的application.js。它加載在$(document).ready(function(({...})

$(function() { 
    if ($(".search")) { 
    tabs = $("li.tab").toArray(); 
    tabs.forEach(function(item) { 
     item.addEventListener("click", function(e) { 
     tab = $($(e.target)).parents("li").attr("data-panel"); 
      $("ul#list li").not(".hidden").toggleClass("hidden"); 
      $("." + tab).toggleClass("hidden"); 
     }) 
     }) 
    } 

    // initial grab of comment buttons for revealing comment forms on posts 
    $("div.post").on("click", ".js-comment-button", (e) => { 
    console.log("grabbed comment buttons") 
    e.preventDefault(); 

    form = $(e.target).parents(".post").children(".js-post-comment-form").removeClass("hidden").addClass("active"); 
    form.find("input.input").focus(); 
    input = form.find("input.input"); 
    input.on("focusout", function() { 
     form.addClass("hidden").removeClass("active"); 
    }) 
    }) 

    // initial grab of reply buttons for comments 
    $("div.comment-body").on("click", "a[id*='js-reply-comment']", (e) => { 
    console.log("grabbed reply buttons") 
    e.preventDefault() 

    $($(e.target)).parent(".comment-likes").siblings(".replies").toggleClass("hidden") 
    $($(e.target)).parent(".comment-likes").siblings(".js-reply-comment").toggleClass("hidden").find("input").focus(); 
    }) 


// close document.ready 
}) 

這裏是我的分頁代碼，當用戶已達到了頁面底部的時候觸發初始按鈕。

$(document).ready(function() { 
    $(window).on('scroll', function() { 
    const more_posts_url = $('.pagination span.next a[rel="next"]').attr('href'); 
    if (more_posts_url && ($(window).scrollTop() > ($(document).height() - $(window).height() - 60))) { 
     $('.pagination').html('<img id="loading" src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />'); 

     // Updates posts with infinite pagination 
     $.getScript(more_posts_url) 
     .done(function(){ 
      console.log("updating buttons!") 
      // comment form button 
      $("div.post").on("click", ".js-comment-button", (e) => { 
      console.log("comment button updated and clicked") 
      e.preventDefault(); 

      form = $(e.target).parents(".post").children(".js-post-comment-form").removeClass("hidden").addClass("active"); 
      form.find("input.input").focus(); 
      input = form.find("input.input"); 
      input.on("focusout", function() { 
       form.addClass("hidden").removeClass("active"); 
      }) 
      }) 

      // reply to comment button 
      $("div.comment-body").on("click", "a[id*='js-reply-comment']", (e) => { 
      console.log("reply button updated and clicked") 
      e.preventDefault() 

      $($(e.target)).parent(".comment-likes").siblings(".replies").toggleClass("hidden"); 
      $($(e.target)).parent(".comment-likes").siblings(".js-reply-comment").toggleClass("hidden").find("input").focus(); 
      }) 
     }) 

     .fail(function() { 
      $("#loading").hide(); 
     }) 

     } 
     return; 
    // close #infinite scrolling 
    }); 
// close document ready 
}); 

附加文檔： 這裏有一個YouTube video證明的行爲。

我知道這可能不是實現所需行爲的最佳方式，但我只是試圖在使其更清潔之前將其工作。關於如何解決這個問題的想法，但將不勝感激！更好地實現抓取新按鈕（通過ajax更新的按鈕也將被讚賞），但我不能要求太多。在此先感謝您的幫助！

真誠， 萊

Answer 1

你依靠標準document.ready事件來加載功能：當你使用Turbolinks使用Rails 5

$(document).ready(function() { 

，你要使用的Turbolinks load功能，像這樣：

$(document).on('turbolinks:load', function() { 
    // your code here 
}) 

另一種方法是徹底擺脫Turbolinks，但它真的doe s加速腳本重載頁面​​。