Javascript only works once (not even the second time after page refresh) in a Rails application

Question

First question about SO ... please forgive me if this is poorly done.

This seems to be the commonly discussed issue (the search yields dozens, if not hundreds of messages "my JS only works on page refresh", everything is solved using jquery-turbolinks and adds it to application.js ).

I have done all these steps. However, I experience something that almost no one mentions ...

Problem:

• My Javascript only works once (as everyone mentions), but then it never works again, even after refreshing the page.
• I can successfully get it to work a second time ... if I made changes to and then save it. Then the next time I have a Javascript page will work ... once.

Here is what we have:

This adds the localScroll animation to the div that I am using:

 <script type="text/javascript"> $(document).on('page:load', ready) $(document).ready(function() { $('#nav').localScroll({duration:800}); }); </script> 

I use JS libraries (links are broken, since I'm new and can only include up to two links in a post ...):

• Github com /flesler/jquery.scrollTo
• Github com /flesler/jquery.localScroll

Both are loaded and added to app/assets/javascripts

Both are required in application.js (the last two before //= require_tree . ).

I installed and added jquery-turbolinks to my gemfile , launched the Bundler, demanded it in application.js (before turbolinks , but after jquery ) and stopped / started the rails server.

I did not add all the details around the div and name / href combinations that I use, since the animation really works once. I assume that my problem is very closely related to what everyone else is experiencing, but I just can’t find a solution.

Any help would be greatly appreciated.

Thanks!

UPDATE

application.js

 //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require turbolinks //= require_tree . 

LocalScroll.js and scrollTo.js are in the javascripts folder, therefore require_tree . captures them (I checked the page after loading it to check).

This displays a warning every time any page in the application loads after that, a page with the called function.

 <script type="text/javascript"> $(document).ready(function() { alert("JQuery is working!"); $('#nav').localScroll({duration:800}); }); </script> 

Then it twice pops up a warning on any new page if I reload the page using this function. Then three times, if I download it again ... I assume that something under the hood interferes with this JS, so the .localScroll call .localScroll does not work ...

UPDATE 2 Alternative Solution

In the end, I gave up trying to work with localScroll and scrollTo and instead used this agnostic interceptor of internal links:

 <script type="text/javascript"> $(document).ready(function() { $("a[href^=#]").click(function(e) { e.preventDefault(); var dest = $(this).attr('href'); console.log(dest); $('html,body').animate( { scrollTop: $(dest).offset().top }, 'slow' ); history.pushState(null, null, dest); }); }); </script> 

Answer 1

You cause a readiness to load the page, but it does not seem to get a ready-made function.

Try the following snippet:

 var ready; ready = function() { $('#nav').localScroll({duration:800}); }; $(document).ready(ready); $(document).on('page:load', ready);