javascript - jQuery sometimes doesn't work(Ruby on Rails) -


i have rails 5.1.3 application(a facebook clone more precise.) when page loads, fire anonymous function grab of "comment" & "reply" buttons. these buttons responsible revealing comment/reply forms.

the problem i'm having this, when use pagination grab additional posts ajax, fire exact same functions again, this time named updatebuttons(), however, works, doesn't.

here's application.js. loads initial buttons on $(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 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 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 pagination code fires when user has gotten bottom of 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 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 , 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 comment button           $("div.comment-body").on("click", "a[id*='js-reply-comment']", (e) => {             console.log("reply button updated , 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 youtube video demonstrating behavior.

i know may not best way implement desired behavior i'm trying working before making cleaner. thoughts on how fix highly appreciated! better implementation of grabbing new buttons(the ones updated via ajax appreciated), can't ask much. in advance help!

sincerely, loi

you're relying on standard document.ready event load function:

$(document).ready(function() { 

when you're using turbolinks rails 5, want use turbolinks load function, this:

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

the alternative rid of turbolinks entirely, speed script heavy page loads.


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -