Jquery doesn't work on DOM change

Question

In this page of multi-days festivals

https://www.metropub.net/www.italiajazz.it/calendario-festival

I added the following JS

https://www.metropub.net/www.italiajazz.it/sites/default/files/js_injector/js_injector_5.js

jQuery( document ).ready(function() 
{
   console.log( "ready!" );
   jQuery('.fc-event-hori').on('mouseenter', function()
        {   
            x = jQuery(this).text();
            jQuery("a.fc-event-hori:contains('" + x + "')").css("background", "#fccd45"); 
            console.log('in');
        });
    jQuery('.fc-event-hori').on('mouseleave', function()
        { 
            x = jQuery(this).text();
            jQuery("a.fc-event-hori:contains('" + x + "')").css("background", "#15242a"); 
            console.log('out');
        });
});

for extend the hover of the mouse to the festival that are spanned over more than one week.

It works for the first page, but when I change the month, it doesn't work anymore.

Looking for solution on different threads, for example this link

jQuery selector doesn't update after dynamically adding new elements

I modified my original code implementing the "delegated event handling", but my code still works only in the first page.

Am I missing something else?

jQuery(document).on('. fc-event-hori', 'mouseenter', function() { — Sanjay Kumar, Jun 02 '18 at 03:21
@LouysPatriceBessette: there's the link of the JS, is not ok? I thought put less mess in my question :(. Sorry for my misunderstad... — Ponzio Pilato, Jun 02 '18 at 08:44
@SanjayKumar: I tried your solution, but it doesn't work either in the first page :D — Ponzio Pilato, Jun 02 '18 at 08:54

score 0 · Answer 1 · answered Jun 03 '18 at 02:51

I fixed your issue by using delegation, like Sanjay Kumar suggested in comments.

BUT, strangely... It seems that you have another issue with the mouseenter and mouseover events. I think they possibly are prevented somewhere. I can't say.

I used the mousemove event to make it work.

I did this directly in the console. First I detached the event handler you had:

jQuery('.fc-event-hori').off('mouseenter');
jQuery('.fc-event-hori').off('mouseleave');
jQuery('.fc-event-hori').off('mouseover');

Then I inputted this handler code:

jQuery('.fullcalendar').on('mousemove mouseleave','.fc-event-inner', function(e){
  // Get the text.
  var x = jQuery(this).find('.fc-event-title').text();
  console.log(e.type);

  // Depending on the event, choose a color.
  if(e.type=="mousemove"){
    color="#fccd45";
  }else{
    color="#15242a";
  }

  // Use the text to lookup for the matching elements.
  jQuery(".fc-event-inner:contains("+x+")").css("background",color); 
});

And it worked perfectly.

Now, if I were you, I would try to find if there is a .preventDefault() somewere applyed on those events... It may not be that... But I would look. I would search all the files using Agent Ransak.

Then, I would look to upgrade the jQuery version. You are currently using 1.7.2, which is pretty old in my opinion. There are guides to help on upgrading.

Jquery doesn't work on DOM change

1 Answers1