【问题标题】：Nest a link_to inside of another link_to将一个 link_to 嵌套在另一个 link_to 中
【发布时间】：2023-03-26 21:18:02
【问题描述】：

我需要像这样在另一个“a”元素中嵌套一个“a”元素：

<a href="www.example.com" class="so-and-so">
    <span>something</span>
    <a href="www.another.example.com" class="another-link"><i class="an-icon"></a>
</a>

但是我需要使用 rails 'link_to' 助手而不是普通的 html。但是当我尝试像这样嵌套 link_to 助手时：

<%= link_to "www.example.com", class: "so-and-so" do %>
    <%= content_tag :span, "something" %>
    <%= link_to "www.another.example.com", class: "another-link" do %>
        <%= content_tag :i, class: "an-icon" %>
    <% end %>
<% end %>

它输出的 html 更像这样：

<a ...>
    <span ...>
</a>
<a class="another-link" ...>...</a>

任何帮助将不胜感激。谢谢！

编辑

事实证明，rails 最终输出了正确的 html，但浏览器没有正确解释它。链接中可以有链接吗？

已解决（ISH）

原来嵌套<a> 元素不是有效的HTML，所以浏览器只是试图“纠正”我的代码。我最终只是将 a 元素放在另一个元素之外，并使用 CSS 使其看起来相同。

【问题讨论】：

您确定这是输出的内容（在原始视图源中），而不仅仅是浏览器正在纠正的内容？嵌套链接不是合法的 HTML：stackoverflow.com/questions/9882916/…
是的，我刚刚发现...谢谢！
点击内层a时浏览器应该加载什么地址？
内部的<a> 标记应该链接到控制器上的销毁操作，因此它需要使用link_to 中的method: :delete 选项。

标签： html ruby-on-rails ruby erb

【解决方案1】：

因为您需要在控制器上的销毁操作中使用内部 link 标记点。可以通过第一个链接的click事件触发动作。

  $('#first_link').on('click', function() {
          $.ajax({
            type: "DELETE", 
            url: YOUR_SECOND_LINK ,
            data: {id: YOUR_ID },
            success: function(data, textStatus, jqXHR){...},
            error: function(jqXHR, textStatus, errorThrown){...}
          })
   });

【讨论】：

【解决方案2】：

这可以通过使用<template> 元素来实现，这将防止浏览器在打开另一个锚标记之前关闭它。

<%= link_to "www.example.com", class: "so-and-so" do %>
  <%= content_tag :span, "something" %>
  
  <template>
    <%= link_to "www.another.example.com", class: "another-link" do %>
      <%= content_tag :i, class: "an-icon" %>
    <% end %>
  </template>
<% end %>

我解决了这个问题，因为我正在将具有嵌套锚标记的 Vue 组件重构为 html.erb 文件。这是每个单独的 Vue 组件的要求，它被包装在 <template> 标记中，所以我复制了它，瞧！

【讨论】：