My Rails app won't load a Jquery popup without a hard refresh

Question

I followed a tutorial for a simple popup,

demo found here: http://demos.inspirationalpixels.com/popup-modal/ code found here: https://inspirationalpixels.com/tutorials/custom-popup-modal/

My problem goes as followed:

1. Land on 1st page, click popup button -- popup opens.
2. Close popup and navigate to 2nd page.
3. Return to 1st page, click popup button -- nothing happens.

I think the issue is with Turbolinks. From what I've read, because Turbolinks renders HTML with Ajax instead of reloading the page, it can sometimes affect the way Jquery functions. I've read through the Turbolinks documentation describing how this works and followed their recommendations. I've also been gone through what seems like every blog post describing similar issues but nothing I've tried has made much of a difference. There are a few other SO questions similar to this one but many of the solutions are from before the new version of Turbolinks came out and the ones that are new didn't solve my problem.

Here is the relevant code.

Html in view

  <a data-popup-open="popup-2" href="#">Open popup</a>

  <div class="popup" data-popup="popup-2">
    <div class="popup-inner">
      <div class="popup-content">
         .
         .
         .
        <button data-popup-close="popup-2" href="#">Close popup.</button>
      </div>
    </div>
  </div>

Application.js

//= require jquery
//= require bootstrap
//= require rails-ujs
//= require turbolinks
//= require_tree .

Custom.js file.

$(document).on('turbolinks:load', function() {

//----- OPEN
$('[data-popup-open]').on('click', function(e)  {
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function(e)  {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});

});

At first I had the code wrapped in document.ready. After finding out that the issue was related to turbolinks, I followed their documentation and replaced the Jquery "$(document).ready..." with "$(document)on('turbolinks:load'..." The problem persists, but now the developer console is showing an uncaught type error (seen below) after going back to the first page and clicking the popup.

site-wide.self-ef6....js?body=1:5 Uncaught TypeError: $ is not a function
  at HTMLDocument.<anonymous> (site-wide.self-ef6....js?body=1:5)
  at HTMLDocument.dispatch (jquery.self-bd7d....js?body=1:5227)
  at HTMLDocument.elemData.handle (jquery.self-bd7d....js?body=1:4879)
  at Object.Turbolinks.dispatch (turbolinks.self-2db6e....js?body=1:6)
  at e.notifyApplicationAfterPageLoad (turbolinks.self-2db6e....js?body=1:7)
  at e.visitCompleted (turbolinks.self-2db6ec....js?body=1:7)
  at e.complete (turbolinks.self-2db6ec....js?body=1:6)
  at e.<anonymous> (turbolinks.self-2db6ec....js?body=1:6)
  at turbolinks.self-2db6ec....js?body=1:6

At this point, it seems like I'm just trying random things to get it to work. I would appreciate advice on what I'm doing wrong and direction on how to fix it.

Edit: As an afterthought, it may be relevant to mention that I have bootstrap included but I'm going to be removing it. The popup isn't made with bootstrap and I don't want a bootstrap solution.

Answer 1

Posting my solution.

You're not supposed to replace

$(document).ready(function( $ ) {

with

$(document).on('turbolinks:load', function() {

The code still needs to be wrapped in a jQuery function, so use them together.

$(document).ready(function($) {
$(document).on('turbolinks:load', function() {

//----- Your JS code here.

});
});

Credit to this question about jQuery uncaught type errors for the answer.