通過單擊列表元素在列表項中觸發錨點

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(); 
});