Why 'mouseenter' event does only works for the first element of a spacebar #each iteration?

Question

I am trying to make an off-canvas menu in a template component. I took this article as reference.

I have a very common setup:

• One container tab where I iterate on an items collection
• One item component where I have my off-canvas menu

In other terms, I have a spacebar iteration on my items cursor in my container:

{{#each items}}
  {{> item}}
{{/each}}

and in my item component, I have a simple mouseenter event attached to a <a> DOM node.

Template.item.events({
  "mouseenter  #item_menu": function(event, template){
    console.log("hover detected");
    $(template.find('#item_wrapper')).toggleClass('show-nav')
  },
})

It works perfectly well with the first item component but for all the others, the mouseenter event is not triggered. Why?

Answer 1

Change the element and the event selector from #item_menu to a class .item_menu ID should be unique (once in your html)