Rails 5, jQuery, add event to dynamically created items

Question

I have my solution working, but I believe there would be a better, more elegant way. Any ideas are very welcome.

The thing is that navbar dropdown menu items has icons left to it. I placed icon and item name in separate spans so I could style them separately. I also wrapped those with a div, since I need to change background color of both - icon and list item name if hovered.

Navbar renders links in dropdown menu:

      <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 to change the background:

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

So it does the job, but especially jQuery part is a bit clumsy (HTML is also far away from "wow"). Any ways to improve it? Thanks!

Satpal · Accepted Answer · 2016-12-05 13:01:32Z

1

As you are creating element in loop with same id i.e. icon-cont and name-cont, it create duplicate identifiers, In HTML identifiersmust be unique.

You can achieve it using pure 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>

answered Dec 5, 2016 at 13:01

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Julius Dzidzevičius Over a year ago

this way does not work, but that previous does if I add !important for adding background to .icon-cont, since I have a background set for .icon-cont. But its much better anyway. Will try to get rid of that !important

Collectives™ on Stack Overflow

Rails 5, jQuery, add event to dynamically created items

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related