通过单击列表元素触发列表项中的锚点

Question

我正在尝试通过单击作为锚点父级的列表元素来触发对锚点的单击。

<% conversations.each do |conversation| %>
  <% user_status = current_user.id == conversation.sender.id ? conversation.recipient : conversation.sender %>
  <li id="conversation-item_<%= conversation.try(:id) %>">
    <%= gravatar_for(user_status, size: 50) %>
    <%= link_to user_status.email, conversation_messages_path(conversation),
        remote: true,
        class: "conversation-names #{'current-link' if conversation == conversations.first}" %>
    <span class="delete-message"><%= link_to conversation, method: :delete, remote: true do %><i class="fa fa-times"></i><% end %></span>
    <p><%= truncate(conversation.messages.first.try(:body)) %></p>
  </li>
<% end %>

我想单击列表元素并同时单击 link_to 锚。

我试过了：

$("#conversation-item").click(function(){
  $("#coversation-names")[0].click()
});

html 渲染：

<div class="inbox-box">
  <div class="row">
    <div class="small-12 medium-4 large-4 columns">
      <div class="conversations">
  <ul>
    <li>
      <h4>Chats</h4>
    </li>
      <li id="conversation-item_108" class="current-link">
        <img alt="viewer@example.com" class="gravatar" src="https://secure.gravatar.com/avatar/426caa1f3e35c0b18f73110d2b2c6f74?d=retro&amp;s=50">
        <a class="conversation-names" data-remote="true" href="/conversations/108/messages">viewer@example.com</a>
        <span class="delete-message"><a data-remote="true" rel="nofollow" data-method="delete" href="/conversations/108"><i class="fa fa-times"></i></a></span>
        <p>helllo</p>
      </li>
      <li id="conversation-item_107" class="">
        <img alt="admin@example.com" class="gravatar" src="https://secure.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?d=retro&amp;s=50">
        <a class="conversation-names " data-remote="true" href="/conversations/107/messages">admin@example.com</a>
        <span class="delete-message"><a data-remote="true" rel="nofollow" data-method="delete" href="/conversations/107"><i class="fa fa-times"></i></a></span>
        <p>ffjoafdks</p>
      </li>
  </ul>
</div>

但什么都没有发生。

Answer 1

我认为id 后面跟着一些东西，所以请改用attribute starts with selector 而coversation-names 是一个类，所以将它更新为一个类选择器。虽然只有当点击元素不是a标签时才会触发事件。

$('[id^="conversation-item"]').click(function(e){
  // check the clicked element is `a` tag
  if($(e.target).is(':not(.coversation-names)'))
    $('.coversation-names', this).click()
});

---

或者使用event.stopPropagation()方法防止事件冒泡。

$('[id^="conversation-item"]').click(function(e){
   $('.coversation-names', this).click()
}).on('click','.coversation-names',function(e){
   e.stopPropagation();
});