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

Question

嗨我正在使用jquery quicksand插件来创建一个投资组合网站.在我拥有的每个图像上我都试图用jQuery创建一个悬停效果.效果首先起作用但是在我点击了附近的流沙插件的按钮之后悬停效果不再起作用了.在创建新元素并将其插入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();
    })
});

Answer 1

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

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

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