Jquery не работает на смену DOM

Question

На этой странице многодневных фестивалей

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

я добавил следующие 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');
        });
});

длянаведите указатель мыши на фестиваль, который длится более одной недели.

Он работает для первой страницы, но когда я меняю месяц, он больше не работает.

В поисках решения для разных потоков, например, по этой ссылке

Селектор jQuery не обновляется после динамического добавления новых элементов

Я изменил свой исходный код, реализовав делегированныйобработка событий ", но мой код все еще работает только на первой странице.

Я что-то пропустил?

Answer 1

Я исправил вашу проблему, используя делегирование , например Санджай Кумар , предложенный в комментариях.

НО , как ни странно ... Кажетсячто у вас есть другая проблема с событиями mouseenter и mouseover.Я думаю, что они, возможно, где-то предотвращены.Не могу сказать.

Я использовал событие mousemove, чтобы оно заработало.

Я сделал это прямо в консоли.Сначала я отсоединил ваш обработчик событий:

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

Затем я ввел этот код обработчика:

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

И он работал отлично.

Теперь, если бы я былВы, я бы попытался выяснить, есть ли .preventDefault(), которые были применены к этим событиям ... Это может быть не так ... Но я бы посмотрел.Я бы искал все файлы, используя Agent Ransak .

Затем я хотел бы обновить версию jQuery.Вы в настоящее время используете 1.7.2, который, на мой взгляд, довольно стар.Есть руководств , которые помогут при обновлении.