javascript - jQuery 有时无法与 Ruby on Rails 一起使用

Question

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

我遇到的问题是，当我使用分页通过ajax获取其他帖子时，我再次触发完全相同的函数，这次名为 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 事件来加载您的函数:

$(document).ready(function() {

当您在 Rails 5 中使用 Turbolinks 时，您需要使用 Turbolinks load 函数，如下所示:

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

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