jQuery funktioniert manchmal nicht (Ruby on Rails)

Question

Ich habe eine Rails 5.1.3-Anwendung (ein Facebook-Klon, um genauer zu sein.) Wenn die Seite zunächst lädt, feuere ich eine , um alle "Kommentar "&" Antworten "Tasten. Diese Tasten sind verantwortlich für die Enthüllung die Kommentar/Antwort Formen.

Das Problem, das ich habe, ist dies, wenn ich Paginierung verwenden, um zusätzliche Beiträge mit Ajax zu packen, ich exakt die gleichen Funktionen Feuer wieder, diesmal namensupdatebuttons() aber manchmal funktioniert es, manchmal nicht .

Hier ist meine application.js. die lädt die Anfangs Tasten auf $(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 
}) 

Hier ist meine Paginierung-Code, der ausgelöst wird, wenn der Benutzer auf den unteren Rand der Seite bekommen hat.

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

Zusätzliche Dokumentation: Hier ist ein YouTube video das Verhalten zu demonstrieren.

Ich weiß, dass dies nicht der beste Weg ist, um das gewünschte Verhalten zu implementieren, aber ich versuche nur, es funktioniert zu bekommen, bevor es sauberer macht. Gedanken darüber, wie das zu beheben ist, würden aber sehr geschätzt! Eine bessere Implementierung von neuen Buttons (die über Ajax aktualisiert wurden, wäre ebenfalls zu begrüßen), aber ich kann nicht zu viel fragen. Vielen Dank im Voraus für Ihre Hilfe!

Mit freundlichen Grüßen, Loi

Answer 1

Sie sind auf einem Standard-document.ready Ereignis verlassen Ihre Funktion zu laden:

$(document).ready(function() { 

Wenn Sie verwenden Turbolinks mit Rails 5, möchten Sie die Turbolinks load verwenden Funktion, wie folgt aus:

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

Die Alternative ist ganz aus Turbolinks loszuwerden, aber es ist wirklich doe s beschleunigen Skript schwere Seite lädt.