My goal is to create an off-canvas menu within a template component. I found inspiration from this helpful article.
The setup I have is quite common:
- A container tab where I loop through an
itemscollection - An
itemcomponent that contains the off-canvas menu
In simpler terms, I am iterating over my items in the container like this:
{{#each items}}
{{> item}}
{{/each}}
Inside my item component, there is a basic mouseenter event attached to an <a> DOM element.
Template.item.events({
"mouseenter #item_menu": function(event, template){
console.log("hover detected");
$(template.find('#item_wrapper')).toggleClass('show-nav')
},
})
Everything works perfectly for the first item component, but for all subsequent ones, the mouseenter event does not seem to be triggered. What could be causing this issue?