0

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);

});
  • can you please share the dom – brk Oct 21 '18 at 16:22
  • 1
    A click listener itself doesn't affect mouse enter/leave events. Code in it however could. For instance if you are destroying and recreating those elements that will also destroy those listeners. If that is the case or your elements are being added at some other time you should be setting up the listeners later or using a delegated event. But in order to know that for sure we have to see more of your code. Like where / when are you calling `$('.list-item').on(...)`, where / when are the `.list-item` elements in the dom – Patrick Evans Oct 21 '18 at 16:32
  • .list-item elements are dynamically created inside the sidebar, so yes they get created and destroyed. Isn't the .on jquery method used for dynamic content contrary to .addeventlistener which doesn't work anymore if element changes? –  Oct 21 '18 at 16:41
  • @brk in the DOM there is no .list-item, they get created on load, parsing stuff from firebase. –  Oct 21 '18 at 16:43
  • Why are you using a mix of vanilla JS and jQuery? Wouldn't it be easier (and lead to fewer bugs) if you stuck with one or the other? – Andy Oct 21 '18 at 16:50
  • Well where i know how to do something and changes very little in terms of lines of code i use vanilla, where there's something more complex as jquery's .on i use it. From what i read jquery can be used mixed with vanilla? https://stackoverflow.com/questions/3677140/can-regular-javascript-be-mixed-with-jquery –  Oct 21 '18 at 16:57
  • 1
    Mixing them with regard to the dom just makes for an ugly code base. Pick one or the other and be consistent – charlietfl Oct 21 '18 at 17:02
  • Don't use a setTimeout as that could become inconsistent or require a wait time that is unnecessary. See the marked duplicate for various solutions, like delegated event listeners, to help solve your problem. – Patrick Evans Oct 21 '18 at 18:04
  • @PatrickEvans ok thanks for the tip, i've already got rid of that timeout, wrapped the listener in its own function and i'm calling that function in some reload list spots so it works well now. i'll read that post thank you –  Oct 21 '18 at 20:39

0 Answers0