I think i have two event listeners in conflict, in my js file i have a click listener made like:
document.getElementById('sidebar').addEventListener('click', function(et) {
et.preventDefault();
var item = et.target.closest('.inner');
if (item) {
// etc.
that checks all clicks made over the sidebar
, if the item clicked is that with class .inner
then do something.
now when i'm trying to set a on hover listener on list items in the same sidebar with:
$('.list-item').on('mouseenter', function(eee){
console.log('entered');
}).on('mouseleave', function(eee){
console.log('left');
});
it doesn't work. same code placed on the logo for instance works fine. So i'm thinking it may be a conflict with the first code shown above, is it or must be something else?
SOLVED:
I was creating .list-item after 1000ms from page load with a setTimeout function, so despite the jquery .on method which is sort of a delegate from my understanding, the setTimeout was still able to mess it.
I now placed the code inside the timout and works.
$(window).on('load', function(){
setTimeout(function(){
// other code
$('.list-item').on('mouseenter', function(eee){
console.log('entered');
}).on('mouseleave', function(eee){
console.log('left');
});
},1000);
});