javascript资产中的jQuery没有触发

Question

如果我将此代码放在 erb 视图中，它会完美运行

<script type="text/javascript">
  $('.disabled-course').click(function() {
    $('#alert').html(
      '<div class="alert alert-warning alert-dismissible">' +
      '  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' +
      '  <h4><i class="icon fa fa-warning"></i>¡Alerta!</h4>' +
      '  Los cursos en vivo solo están disponibles para usuarios premium' +
      '</div>'
    );
  })
</script>

但是，当我将相同的代码（脚本标签除外）放在 assets/javascripts 文件夹中它自己的文件中时，它会停止工作。 我也没有正确显示 unicode 字符（我得到 'á' 而不是 'á'）

rails生成的js文件是这样的：

$('.disabled-course').click(function() {
  $('#alert').html(
    '<div class="alert alert-warning alert-dismissible">' +
    '  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' +
    '  <h4><i class="icon fa fa-warning"></i>¡Alerta!</h4>' +
    '  Los cursos en vivo solo están disponibles para usuarios premium' +
    '</div>'
  );
})

我已经检查了 jQuery 是否包含在其他所有内容之前，还尝试将其放入 $(document).ready(function() {}

Answer 1

确保在 application.js 清单中包含 javascript 文件：

application.js

//= require jquery
.. A bunch of other requires
//= require name_of_js_file

这将加载一个名为app/assets/javascripts/name_of_js_file.js 的文件。作为健全性检查，请确保通过检查您的开发工具控制台加载 name_of_js_file.js。您还可以添加 console.log 以在脚本被加载时触发以作为健全性检查。

另外，为了安全起见，我总是将此类代码包装在 $(document).ready(function() {} 回调中，就像您提到的那样。这样做的原因是即使加载了 jQuery，您的 $('.disabled-course') 元素也可能不存在于页面上。