動態添加類jQuery懸停功能

我在懸停在動態添加元素上時添加活動類時遇到問題。我簡化了下面的代碼。我已閱讀.on的功能，但無法讓它正常工作。動態添加類jQuery懸停功能

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

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

以下。對解決方案沒有做任何事情：

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

來源

2013-11-22 Peter Willis III

新的事情上是，是，你應該將它添加到身體聽衆。

所以基本上：

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

甚至更好：

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

沒有測試，但應該指向你在正確的方向

來源

2013-11-22 11:24:09

的處理程序添加到'parent'元素，而不是'body' \'document'。所以jQuery只有處理程序的一個子集來檢查選擇器是否匹配觸發事件的元素。否則，它必須檢查所有註冊的處理程序。 – Andreas

這是正確的。編輯我的答案。謝謝：-） –

測試和工作，當你添加新元素，請添加：

$(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

來源

2013-11-22 11:30:33

動態添加類jQuery懸停功能

回答

相關問題