时间戳

首页 > 解决方案 > Jquery 不适用于 DOM 更改

jquery - Jquery 不适用于 DOM 更改

问题描述

在这个多日节日的页面中

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 选择器在动态添加新元素后不更新

我修改了实现“委托事件处理”的原始代码，但我的代码仍然只在第一页有效。

我还缺少其他东西吗？

标签： jquerydelegates

解决方案

我通过使用授权解决了您的问题，就像Sanjay Kumar在评论中建议的那样。

但是，奇怪的是......似乎你对mouseenterandmouseover事件有另一个问题。我认为他们可能在某处被阻止。我不能说。

我使用该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，在我看来这已经很老了。有帮助升级的指南。

推荐阅读