0

嗨，我正在使用 jquery流沙插件创建一个投资组合网站。在我拥有的每张图像上，我都在尝试使用 jQuery 创建悬停效果。效果起初有效，但在我单击附加到流沙插件的按钮后悬停效果不再起作用。我在创建一个新元素并将其插入 DOM 之前注意到这种现象，点击处理程序不会附加到它。

我怎么解决这个问题？

这是流沙插件和悬停效果的代码：

 $(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();
    })
});
4

2 回答 2

7

仅将事件处理程序绑定到代码运行时存在的元素的特定用法.on()，并且不会影响在该代码执行后动态添加的元素。相反，您需要对 使用事件委托语法.on()，如下所示：

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

理想情况下，您会document用选择器替换更具体但不是动态添加的元素，该元素包含您要在触发mouseover事件时执行回调函数的所有元素。

于 2012-07-09T13:27:16.950 回答
3

由于 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-09T13:27:18.733 回答