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加速脚本重载页面​​。