即使在 Rails 4 应用程序中加载了 jQuery（加载了 jquery.turbolinks），jQuery 也不会触发

Question

我有一个 Rails 应用程序，当单击链接时，jQuery 不会在页面上触发，尽管它应该触发。我想要发生的是，如果单击链接，则警报消息会消失，并且 AJAX 响应会发送到控制器。我已经关闭了点击链接的 turbolinks，以及加载的 jquery.turbolinks，这应该解决了这个链接的问题（过去也有）。我正在使用 Ruby on Rails 4。欢迎提供任何见解！

在我位于views 的 index.html.haml 文件中，我有

= link_to "To be added", "#", :class => "levelup", 'data-no-turbolink' => true

现在在我的javascripts 文件夹中的application.js 文件中，我已经加载了这些行：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require_tree .

stats_uploader.js 文件，位于 javascripts 文件夹中，大概应该执行警报和 ajax 文件包含以下内容：

$('.levelup').click(function() { 
  alert("Yeah");

  var level = $('.playerlevel').text();
  alert(level); //Pat
  level++;
  alert(level); //Pat

  $.ajax({type: "GET",

    url: $(this).attr("href"),
    dataType: "script",
    data:  level ,
    error: function() {
      alert("AJAX failed");
    },
    success: function() {
      alert("Success");
    }

  });
});

当我在页面上查看源代码时，我会看到这些相关行，表明 stats_uploader 表单已加载，并且相应的类已应用于元素。

    <script data-turbolinks-track="true" src="/assets/jquery.turbolinks.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/stats_uploader.js?body=1"></script>

...
...
...
...
      <div class='container'>
        yessir
        Player Level
        <div class='playerlevel'>
          1
        </div>
        <!-- TODO Make Buttons to click on -->
        <a class="levelup" data-no-turbolink="true" href="#">To be added</a>
      </div>

Answer 1

如果您的页面结构如图所示，那么问题可能是您试图在页面中尚不存在的链接上连接点击处理程序。您需要将 click 设置包装在 $(document).ready 函数中：

$( document ).ready(function() {
  $('.levelup').click(function() { ... });
});

或更短的形式：

$(function() {
  $('.levelup').click(function() { ... });
});