Rails 5/jQuery: On click touchstart event not working

Question

I'm trying to use a bourbon/refills componenet (sliding_panel) and I have on('click touchstart') event. I'm using this for my navigation menu. The event will work just fine on first page load but after that will stop. The event uses toggleClass to show and hide the menu. I'm wasn't sure if this was a turbolinks problem so I did some digging and found the jquery-turbolinks gem. I went through the installation instructions but same outcome. Has anyone else had this problem?

Code below:

_navbar.html.erb

<button type="button" class="js-menu-trigger sliding-panel-button">
 Click for Sliding Panel
</button>

<nav class="js-menu sliding-panel-content">
 <ul>
  <li><%= link_to 'Users', users_path %></li>
  <li><a href="javascript:void(0)">Item 2</a></li>
  <li><a href="javascript:void(0)">Item 3</a></li>
 </ul>
</nav>

<div class="js-menu-screen sliding-panel-fade-screen"></div>

sliding_panel.js

$(document).ready(function(){
 $('.sliding-panel-button,.sliding-panel-fade-screen,.sliding-panel-close').on('click touchstart',function (e) {
 $('.sliding-panel-content,.sliding-panel-fade-screen').toggleClass('is-visible');
 e.preventDefault();
 });
});

sliding_panel.scss

.sliding-panel-content {
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $sliding-panel-border-color: $dark-gray;
  $sliding-panel-background: lighten($sliding-panel-border-color, 5%);
  $sliding-panel-color: #fff;
  $sliding-panel-border: 1px solid $sliding-panel-border-color;
  $sliding-panel-background-hover: $action-color;
  $sliding-panel-color-hover: #fff;
  $sliding-panel-background-focus: lighten($sliding-panel-background, 5%);

  @include position(fixed, 0 auto 0 0);
  @include size(220px, 100%);
  background: $sliding-panel-background;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transform: translateX(-220px);
  transition: all 0.25s linear;
  z-index: 999999;

  ul {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  li a {
    border-bottom: $sliding-panel-border;
    color: $sliding-panel-color;
    display: block;
    font-weight: bold;
    padding: 1em;
    text-decoration: none;

    &:focus {
      background-color: $sliding-panel-background-focus;
    }

    &:hover {
      background-color: $sliding-panel-background-hover;
      color: $sliding-panel-color-hover;
    }
  }

  &.is-visible {
    transform: translateX(0);
  }
}

.sliding-panel-fade-screen {
  @include position(fixed, 0);
  background: black;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  z-index: 999998;

  &.is-visible {
    opacity: 0.4;
    visibility: visible;
  }
}

.sliding-panel-button {
  cursor: pointer;
  display: inline-block;
  outline: none;
  padding: 10px 16px;
  position: relative;

  img {
    height: 1.3em;
  }
}

These are exact copied exactly from the bourbon/refills site here.

Answer 1

You shouldn't listen to ready event, but to page:load event. So, the code will be something like this:

$(document).on('page:load', function(){
 $('.sliding-panel-button,.sliding-panel-fade-screen,.sliding-panel-close').on('click touchstart',function (e) {
 $('.sliding-panel-content,.sliding-panel-fade-screen').toggleClass('is-visible');
 e.preventDefault();
 });
});

Source: Rails 4: how to use $(document).ready() with turbo-links

Hope it helps.

Answer 2

Ok so I had Turbolinks ~> 5.2. I went back to Turbolinks ~> 5.0.1 and then loaded the jQuery like so: $(document).on('turbolinks:load', function() instead of using ready(). This SO post helped me figure out the solution.