перемещение javascript в папку assets

#javascript #jquery #ruby-on-rails

Вопрос:

я пытаюсь переместить мой javascipt со страницы просмотра, где он работает, в файл assets / javascripts. Однако, когда я выполняю перемещение, javascript больше не выполняется. Я не уверен, почему?

 $('.dropbtn').click(function(){
    if($(this).hasClass("active") ) {
      $(this).parent(".dropdown").find('.dropdown-content').removeClass('show');
      $(this).removeClass('active');
    }
  else{
  $('.dropdown-content').removeClass('show');
  $(this).parent(".dropdown").find('.dropdown-content').addClass('show');
  $(this).addClass('active');
    }
});

1. Я бы предположил, что это потому, что он больше не включается на страницу. Итак, я не думаю, что нам нужен ваш код JavaScript здесь — если он работал до перемещения, но не после , то код JS не виноват — это перемещение нарушило его, и мы должны выяснить, почему файлы не были включены должным образом.

2. Вы используете javascript непосредственно в, html не используя <script> тег

3. @MaheerAli нет, я не. Я переместил его в свой собственный файл .js, но он все еще не работает

4. @VLAZ есть предложения?

5. @b.herring нет, не зная, как файлы должны быть включены. И поскольку я на самом деле недостаточно знаю о том, как Rails все собирает и объединяет, я сомневаюсь, что смогу помочь. Но другие разработчики ROR, вероятно, могли бы — я предполагаю, что им понадобятся подробности о том, как включаются ваши файлы. Прошло слишком много времени с тех пор, как я занимался своей крошечной разработкой на Ruby on Rails, поэтому я не могу вспомнить, что бы это могло быть. Но это должно быть что-то вроде выдержки из конфигурационных файлов для этого проекта.

Ответ №1:

Если ваш файл Javascript включен в конвейер ресурсов, он будет объединен, уменьшен и предварительно обработан в один большой файл .js, который включен — по умолчанию — в ваш макет <head> . К тому времени, когда браузер читает этот файл, элемент dom, связанный с .dropbtn классом, еще не загружен, поэтому click прослушиватель событий никогда не добавляется.

Решением было бы поместить ваш код внутрь функции, которая вызывается после загрузки документа:

 $(document).ready(function(){
  // your code goes here.
});

Однако, если вы используете turbolinks (который включен по умолчанию в rails), вам необходимо использовать:

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

Причина этого в том, что после загрузки документа turbolinks обновит его вместо перезагрузки после каждого запроса, поэтому $(document).ready() будет запускаться только один раз, в то время как 'turbolinks:load' будет запускаться каждый раз, когда turbolinks загружает содержимое в ваше приложение.

1. спасибо за ваш ответ. Похоже, что при добавлении вашего кода в мой происходит синтаксическая ошибка. Он выделяет последнюю )); часть вашего кода розовым цветом. Я пытался что-то удалить, но не могу исправить.

2. Да, вы правы. Я пропустил скобки, но я обновил ответ!