Rails点击事件不起作用

Posted 2023-05-09

【中文标题】Rails点击事件不起作用

【英文标题】：Rails click event not working

【发布时间】：2017-08-22 02:00:31

【问题描述】：

我想要完成的是，用户可以选择列表组中的一项，并且无法返回它是哪一项，同时使该项在组中处于活动状态。我似乎无法让它与 jquery 一起使用，或者我没有正确执行此操作。

感谢任何反馈/帮助。

这是 HAML 代码

= form_for @editor do |f|
  %body
   .container
    .list-group
      %a.list-group-item.active Hello 
      %a.list-group-item Hey 
      %a.list-group-item Greetings 

我制作了一个名为 editors.js 的 js 文件

$(document).ready(function() 
 $(".list-group-item").live('click', function()
  $('.active').removeClass('active');
  $(this).addClass('active');
 );
);

【参考方案1】：

$(document).on("click", ".list-group-item", function()
  $(this).addClass('active')
    .siblings('.active')
    .removeClass('active');
);

.active 
  color: red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
  <a class="list-group-item active">Hello</a>
  <a class="list-group-item">Hey</a>
  <a class="list-group-item">Greetings</a>
</div>
<div class="list-group">
  <a class="list-group-item active">Bye</a>
  <a class="list-group-item">Adios</a>
  <a class="list-group-item">Auf Wiedersehen</a>
</div>

通过从文档委托而不是将处理程序附加到 DOM 节点，这也使其具有幂等性和 turbolink 兼容。

【讨论】：

这仍然没有改变结果，因为它不适用于应用程序。还有什么问题？

上面的代码确实按预期工作，所以错误在其他地方。但是你需要在浏览器中使用控制台来实际调试它。

您还应该检查您的 javascript 文件是否实际包含在 application.js 中并由浏览器运行。

是的，我已根据需要将它包含在我的 application.js 文件中，但它仍然无法正常工作。如何正确调试此问题？

我一直在使用控制台。它似乎没有被加载，即使我需要 app.js 中的树，我该如何解决这个问题