對jded懸停效果的aded DOM元素不起作用

嗨我正在使用jquery quicksand插件來創建一個投資組合網站。我有每個圖像，我試圖創建一個與jQuery的懸停效果。效果起初但是當我單擊按鈕到達流沙插件時，懸停效果不再起作用。當我創建一個新元素並將其插入到DOM中時，點擊處理程序沒有附加到它，我注意到了這種情況。對jded懸停效果的aded DOM元素不起作用

我怎樣才能解決這個問題？

這對於流沙blugin和懸停效果代碼：

$(document).ready(function() { 

    var $filterType = $('#filterOptions li.active a').attr('class'); 
    var $holder = $('ul.ourHolder') 
    var $data = $holder.clone(); 

    $('#filterOptions li a').click(function(e) { 
    $('#filterOptions li').removeClass('active'); 

    var $filterType = $(this).attr('class'); 
    $(this).parent().addClass('active'); 
    if ($filterType == 'all') { 
     var $filteredData = $data.find('li'); 
    } 
    else { 
     var $filteredData = $data.find('li[data-type=' + $filterType + ']'); 
    } 
    $holder.quicksand($filteredData, { 
     duration: 800, 
     easing: 'easeInOutQuad' 
    }); 
    return false; 
    }); 

    //hover effect 
    var portfolio = $("ul.ourHolder li"); 
    portfolio.on('mouseover', function(){ 
     $(this).children('div.full').stop().fadeTo('slow',0.5);  
    }) 
    portfolio.on('mouseout' , function(){ 
     $(this).children('div.full').stop().fadeOut(); 
    }) 
});

來源

2012-07-09 Nistor Alexandru

那的.on()特定使用僅結合事件處理程序代碼被運行時存在的元素，並不會影響因素在代碼執行後動態添加。相反，你需要使用事件代表團語法.on()，這樣的事情：

$(document).on('mouseover', 'ul.ourHolder li', function(){ 
    $(this).children('div.full').stop().fadeTo('slow',0.5);  
})

理想情況下，你會用選擇替換document了更具體的，而不是動態添加，元素包含所有的您想要在觸發mouseover事件時執行回調函數的元素。

來源

2012-07-09 13:27:16

我想，如果我能給予好評你更多;很好的答案！ – Bojangles 2012-07-09 13:30:29

由於li元素正在動態添加到DOM，所以使用備用版本on來委派懸停事件。

試試這個：

//hover effect 
var portfolio = $("ul.ourHolder li"); 
$("ul.ourHolder").on("mouseover", "li", function(){ 
     $(this).children('div.full').stop().fadeTo('slow',0.5);  
}); 

$("ul.ourHolder").on("mouseout", "li", function(){ 
     $(this).children('div.full').stop().fadeOut(); 
});

來源

2012-07-09 13:27:18 Chandu

對jded懸停效果的aded DOM元素不起作用

回答

相關問題