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 selector doesn't update after dynamically adding new elements

我修改了原始代码，实现了＆＃34;委托事件处理＆＃34;，但我的代码仍然只在第一页中有用。

我错过了其他什么吗？

Answer 1

我使用delegation解决了您的问题，例如评论中建议的Sanjay Kumar。

但，奇怪的是...您似乎还有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，这在我看来已经很老了。有guides帮助升级。

Jquery不会在DOM更改

1 个答案: