Question

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

我该如何解决这个问题？

这是流沙蓝色和悬停效果的代码：

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

Answer 1

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

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

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

Answer 2

由于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();
});

对aded DOM元素的jQuery悬停效果不起作用

2 个答案: