jquery - Rails 5，jQuery，将事件添加到动态创建的元素

Question

我的解决方案有效，但我相信会有更好、更优雅的方法。任何想法都非常受欢迎。

问题是导航栏下拉菜单项有图标留给它。我将图标和元素名称放在不同的 span 中，这样我就可以分别设置它们的样式。我还用 div 包装了它们，因为我需要更改图标和列表项名称的背景颜色(如果悬停)。

Navbar 在下拉菜单中呈现链接:

      <ul class="dropdown-menu">
        <% @categories.each do |cat| %>
          <li>
            <%= link_to cat do %>
            <div class="main-cont"><span id="icon-cont"><i class="glyphicon glyphicon glyphicon-tag"></i></span><span id="name-cont"><%= cat[:name] %></span></div>
          </li>
          <% end %>
        <% end %>
      </ul>

jQuery 改变背景:

$(document).ready(function(){
  $('.main-cont').on('mouseover', function(){
    $(this).find('#icon-cont').css('background-color', 'yellow');
    $(this).find('#name-cont').css('background-color', 'yellow');
  });
  $('.main-cont').on('mouseout', function(){
    $(this).find('#icon-cont').css('background-color', '');
    $(this).find('#name-cont').css('background-color', '');
  });
});

它完成了工作，但尤其是 jQuery 部分有点笨拙(HTML 也离“哇”很远)。有什么方法可以改善吗？谢谢!

Answer 1

当您在循环中创建具有相同 ID 的元素时，即 icon-cont 和 name-cont，它会创建重复的标识符，在 HTML 中标识符必须是唯一的。

您可以使用纯 CSS 实现它。

.main-cont:hover  {
  background-color: yellow
}

<ul class="dropdown-menu">
  <li>
    <div class="main-cont"><span class="icon-cont">loren icon<i class="glyphicon glyphicon glyphicon-tag"></i></span><span class="name-cont">loren name</span>
    </div>
  </li>
 <li>
    <div class="main-cont"><span class="icon-cont">ipsum icon<i class="glyphicon glyphicon glyphicon-tag"></i></span><span class="name-cont">ipsum name</span>
    </div>
  </li>
</ul>