对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元素不起作用

回答

相关问题