jQuery有时不适用于Ruby on Rails

I have a Rails 5.1.3 application (a Facebook clone to be more precise.) When the page initially loads, I fire an anonymous function to grab all of the "comment" and "reply" buttons. These buttons are responsible for revealing the comment/reply forms.

我有一个Rails 5.1.3应用程序（Facebook克隆更精确。）当页面最初加载时，我触发一个匿名函数来获取所有“评论”和“回复”按钮。这些按钮负责显示评论/回复表格。

The problem I'm having is this, when I use pagination to grab additional posts with ajax, I fire the exact same functions again, this time named updatebuttons(), however, sometimes it works, sometimes it doesn't.

我遇到的问题是，当我使用分页来获取带有ajax的其他帖子时，我再次触发完全相同的函数，这次命名为updatebuttons（），但是，有时它会起作用，有时它不会。

Here's my application.js. which loads the initial buttons on $(document).ready(function(( {...})

这是我的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
})

Here's my pagination code which fires when the user has gotten to the bottom of the page.

这是我的分页代码，当用户到达页面底部时会触发该代码。

$(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
});

Additional documentation: here's a YouTube video demonstrating the behavior.

附加文档：这是一段演示行为的YouTube视频。

I know this may not be the best way to implement the desired behavior but I'm just trying to get it working before making it cleaner. I am also looking for a better implementation of grabbing new buttons (e.g. the ones updated via AJAX).

我知道这可能不是实现所需行为的最佳方式，但我只是想让它变得更清洁。我也在寻找更好的抓取新按钮的实现（例如通过AJAX更新的按钮）。

1 个解决方案

#1

You're relying on a standard document.ready event to load your function:

您依靠标准的document.ready事件来加载您的函数：

$(document).ready(function() {

When you're using Turbolinks with Rails 5, you want to use the Turbolinks load function, like this:

当你使用Turbolinks和Rails 5时，你想使用Turbolinks加载函数，如下所示：

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

The alternative is to get rid of Turbolinks entirely, but it really does speed up script heavy page loads.

另一种方法是完全摆脱Turbolinks，但它确实加速了脚本繁重的页面加载。

#1