javascript - View 模板之间的图像更改停止 onclick 下拉菜单？

Question

我在顶部导航栏中放置了一个 onclick 下拉菜单。在顶部导航栏中，我想在我的 new.html.erb View 模板中更改此图像:

<li class="navigation-bar-right"> <span class="create"> <%= link_to image_tag("createpost.svg"),new_post_url, method: :get %> </span> </li>

我从application.html.erb复制了整个导航栏代码并将其添加到new.html.erb的顶部，更改createpost.svg 到createone.svg:

<li class="navigation-bar-right"> <span class="create"> <%= link_to image_tag("createone.svg"),new_post_url, method: :get %> </span> </li>

但是，尽管图像发生了变化，onclick 下拉菜单在我的 new.html.erb View 模板中不再起作用。

尝试了很多解决方案，但无法解决这个问题。任何帮助都会很棒 - 谢谢!!

application.html.erb

<% if user_signed_in? %>

<ul class="navigation-bar">

 <div class="navigation-bar-right-inset">
   <li class="navigation-bar-right"> <span class="create"> <%= link_to image_tag("createpost.svg"),new_post_url, method: :get %> </span> </li> 
   <li class="navigation-bar-right"> <span class="home"> <%= link_to image_tag("home.svg"), posts_url, data: {no_turbolink: true} %> </span> </li>
    <li class="navigation-bar-right" id="drop"> <span class="settings"> <a href="#"> <img class="#" src="/assets/settings.svg"> </a> </span>
      <ul class="dropdown">
        <li> <%= link_to "Profile", edit_user_registration_path, method: :get %> </li>
        <li> <%= link_to "Log out", destroy_user_session_url, method: :delete %> </li>   
      </ul>
    </li>
 </div>

</ul> 

new.html.erb

<% if user_signed_in? %>

<ul class="navigation-bar">

 <div class="navigation-bar-right-inset">
   <li class="navigation-bar-right"> <span class="create"> <%= link_to image_tag("createone.svg"),new_post_url, method: :get %> </span> </li> 
   <li class="navigation-bar-right"> <span class="home"> <%= link_to image_tag("home.svg"), posts_url, data: {no_turbolink: true} %> </span> </li>
    <li class="navigation-bar-right" id="drop"> <span class="settings"> <a href="#"> <img class="#" src="/assets/settings.svg"> </a> </span>
      <ul class="dropdown">
        <li> <%= link_to "Profile", edit_user_registration_path, method: :get %> </li>
        <li> <%= link_to "Log out", destroy_user_session_url, method: :delete %> </li>   
      </ul>
    </li>
 </div>

</ul> 

posts.js.coffee

jQuery ->
$("#drop").click (e) ->
  e.preventDefault()
  $(this).find(".dropdown").fadeToggle "fast"

$(document).on "click", (e) ->
  $trigger = undefined
  $trigger = $("#drop")
  $(".dropdown").fadeOut "fast"  if $trigger isnt e.target and not $trigger.has(e.target).length

CSS

ul li .dropdown {
  display: none;
  position: fixed;
  z-index:100; 
  margin-top: -8px;
}

.dropdown li {
  list-style-type: none;
  padding: 8px;
  width: 70px;
  font-size: 11px;
  font-family: helvetica;
 }

Answer 1

试试这个:

#app/assets/javascripts/posts.js.coffee
$(document).on "click", "#drop", (e) ->
  $trigger = $(this)
  $(".dropdown").fadeOut "fast"  if $trigger isnt e.target and not $trigger.has(e.target).length

1. 始终确保引用有效的 DOM 元素(尤其是在委托(delegate)时)
2. 您正在引用 posts.js.coffee - 您确定这是在 new.html.erb 中调用的吗？