Rails & FontAwesome - 跨度内的链接不起作用答案

【问题标题】：Rails & FontAwesome - link inside span doesn't workRails & FontAwesome - 跨度内的链接不起作用
【发布时间】：2018-05-27 21:47:19
【问题描述】：

我有一个简单的 rails 表单，用 haml 布局，并希望对操作使用 fontAwesome 图标，而不是“显示、编辑...”。所以我创建了这段代码来将链接放在一个 fontAwesome 的跨度内：

%td{:width => "7%"}
  %span{:class => "fa fa-id-card-o"}= link_to '', log
  %span{:class => "fa fa-pencil-square-o"}= link_to "", edit_log_path(log)
  %span{:class => "fa fa-trash"}= link_to '', log, method: :delete, data: { confirm: 'Are you sure?' }

它会生成这个 html：

<td width="7%">
  <span class="fa fa-id-card-o"><a href="/logs/46"></a></span>
  <span class="fa fa-pencil-square-o"><a href="/logs/46/edit"></a></span>
  <span class="fa fa-trash"><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/logs/46"></a></span>
</td>

在我看来它应该可以工作，因为 <a> 在 <span> 内。

但是，没有一个图标是可点击的。

显示如下：

【问题讨论】：

图标应该在锚内，否则锚不会有“可点击”的内容。你试过“颠倒”吗？锚点内的跨度标签？

标签： html ruby-on-rails haml

【解决方案1】：

图标应位于<a> 和</a> 内。现在它是空的。

在 HAML 中，您必须执行以下操作：

= link_to log, method: :delete, data: { confirm: 'Are you sure?' } do
  %span{:class => "fa fa-trash"}

它将跨度放置在链接下，生成的 html 将类似于 <a ...> <span/> </a>

【讨论】：