Question

将鼠标悬停在动态添加的元素上时，我无法添加活动类。我简化了下面的代码。我已经阅读了.on功能，但无法使其正常运行。

$('.mainMenu').addClass('film');

$('.mainMenu.film').hover(  
    function ($) {  
    $('li.film').addClass('active');  
},  
function ($) {  
    $('li.film').removeClass('active');   
}
);

以下.on解决方案没有做任何事情：

$('.mainMenu').on({
mouseenter: function($) {
    $('li.film').addClass('active');
},
mouseleave: function($) {
    $('li.film').removeClass('active');
}
}, ".film");

Answer 1

新的用法是，你应该将它添加到正文监听器。

基本上是这样的：

$("parentobject").on('click','.mainMenu', function() {
  Do your stuff
});

甚至更好：

$("parentobject").on('.mainMenu', {
mouseenter: function($) {
    $('li.film').addClass('active');
},
mouseleave: function($) {
    $('li.film').removeClass('active');
}
}, ".film");

未经测试，但应指向正确的方向

Answer 2

经过测试和工作，当您添加新元素时，会添加类：

$(document).ready(function(){
    $('.mainmenu').on('mouseenter','.film', function(){
        $(this).addClass('active');
    });
    $('.mainmenu').on('mouseleave','.film', function(){
        $(this).removeClass('active');
    });
});

但是如果你只使用类来设置元素样式，我认为你应该使用CSS：

li.film       {color:black} // Your normal style
li.film:hover {color:red  } // Your active style

动态添加类的jQuery悬停函数

2 个答案: