Why is the script only running on one page?

Question

JavaScript

Glanders.
In general, there is a training site with two views: index and show (the last one for each element, i.e. show/:id). And there is a simple script for a pop-up window on clicking on a link.
Well, the problem is that the script only works on one of the views after the page is loaded. Those. if you switch to another id, then the window will no longer appear.
I'm not very familiar with js, in fact, but as I understand it, when the page is loaded, it's like functions are hung only on the elements of one of the views, and the rest go to the forest. Actually, the question is how to avoid it?

If necessary, the script itself:

$(function () {
  //script for popups
  $('a.show-popup').click(function () {
    $('div.'+$(this).attr("rel")).fadeIn(500);
    $("body").append("<div id='overlay'></div>");
    $('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
    return false;				
  });	
  $('a.close').click(function () {
    $(this).parent().parent().fadeOut(100);
    $('#overlay').remove('#overlay');
    return false;
  });
});

Answer 1

Open your layout (For example: application.html.erb)
If there is this line:
then turbolinks is used.
The thing is very interesting, but you need to handle it. If you remove turbolinks, then your code will work on every page.
Why doesn't the code work with turbolinks? This thing only loads css and js once, the first time the page is opened. When switching to another, the files are not downloaded again. This gives a performance boost, but you need to change the code to work with turbolinks. Therefore, run to study the documentation https://github.com/rails/turbolinks in detail!

Answer 2

add a debugger after the comment, see what items are in the $('a.show-popup') collection. Maybe you don't have this class, or the element is not a link. With this amount of information, it's fingers in the sky.

Answer 3

Perhaps the script is simply not on the page when switching to another id?