Question

我有一个Rails 5.1.3应用程序（Facebook克隆更精确。）当页面最初加载时，我会触发anonymous function以获取所有＆＃34;评论＆＃34;并且＆＃34;回复＆＃34;纽扣。这些按钮负责透露评论/回复表单。

我遇到的问题是，当我使用分页来获取带有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() {

当您使用Turbolinks和Rails 5时，您希望使用Turbolinks load功能，如下所示：

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

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

jQuery有时候不能使用Ruby on Rails

1 个答案: