Question

我使用一系列link_to块在我的应用程序中创建按钮。但是，我发现这些链接最终无法正常工作。当我将鼠标悬停在按钮上时，它识别出链接，在Firefox的左下角显示正确的URL，但是当我点击时，没有任何反应。我的终端或开发日志中没有任何内容出现。

我的代码如下：

<%= link_to new_folder_path do%>
    <div class="btn btn-default add-button add_fields"><span class="glyphicon glyphicon-plus"></span>Add Folder</div>
<% end %>

这会呈现以下html：

<li>
  <a href="/folders/new">
    <div class="btn btn-default add-button add_fields"><span class="glyphicon glyphicon-plus"></span>Add Folder</div>
  </a>
</li>

我还应该注意，如果我只是在没有do块的情况下键入标准链接，它运行得很好：

<li><%= link_to "test", new_folder_path %></li>

对此的任何想法都将非常感激！

Answer 1

试试这个。

= link_to "<span class='glyphicon glyphicon-plus'></span>Add Folder".html_safe, new_folder_path, class: 'btn btn-default add-button add_fields'

Answer 2

您最好使用button_to按钮 -

生成一个包含单个按钮的表单，该按钮提交到由该组选项创建的URL。

因此，您可以使用以下代码link_to代替：

<%= button_to "Add Folder", new_folder_path, class: "btn btn-default add-button add_fields glyphicon glyphicon-plus" %>

作为旁注，如果您尝试在<{em> 内添加 <a>标记中的元素，那么您将遇到问题。您可以更好地设置<a>标签本身，或者根本不设置样式。

因此，您可能会使用以下方法解决您遇到的问题：

<%= link_to "Add Folder", new_folder_path, class: "btn btn-default add-button add_fields glyphicon glyphicon-plus" %>

-

图标

我知道Bootstrap包括Glyphicons。如果它们与ionIcons类似，那么它们将通过在:before伪类之前添加字形来工作。

如果是这种情况，则不要需要单独的<span>元素来封装它们;只需将该类添加到您的链接/按钮，就应该预先设置:before。

当然，如果要在链接中设置范围样式，则必须使用link_to块;但是，您需要确保将文本包含在span中，而不是让它没有内容。

Answer 3

原来我把一个类放到我的div中，阻止了链接的呈现（add_fields是类）。非常不满意的回答是它的本质。感谢任何花时间给我一个提示的人。

link_to阻止无效

3 个答案: