Question

im试图将我的javascipt从其工作所在的视图页面移至asset / 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');
    }
});

Answer 1

如果您的Javascript文件包含在资产管道中，它将被串联，缩小并预处理为一个大的.js文件，默认情况下，该文件包含在布局的<head>中。在浏览器读取此文件时，尚未加载与.dropbtn类关联的dom元素，因此从未添加click事件侦听器。

解决方案是将代码包装到一个函数中，该函数会在文档加载后被调用：

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

但是，如果您使用的是turbolinks（默认情况下在rails中包含），则需要使用：

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

这样做的原因是，一旦文档被加载，turbolinks将对其进行更新，而不是在每次请求后重新加载它，因此$(document).ready()仅会触发一次，而'turbolinks:load'将在每次加载内容时触发通过您应用中的涡轮链接。

将javascript移至素材资源文件夹

1 个答案: