0

我在 jQuery 中有一个函数，当您将鼠标悬停在一个 div 上时，它会消失并在其位置显示另一个 div。该功能运行良好，直到我使用 Ajax 加载项目以进行无限滚动。我知道这与绑定新元素有关（从我读过的内容中，使用 on()），但由于我是 jQuery 新手，我不知道如何实现这个更改。我一直在尝试过去几个小时，但没有取得任何进展。

（具体问题：new_social hover 在新加载项目的 ajax 加载时被破坏）

任何帮助将不胜感激，特别是在代码形式！非常感谢！

以下是功能：

$("a.share").hover(function(){
  $(this).closest($('div.new_story')).children("div.new_social_buttons").show();
  $(this).closest(".new_social").hide();
 },
 function(){
  });


$("div.new_social_buttons").hover(function(){

},
function(){
  $(this).hide();
   $(this).closest($('div.new_story')).children("div.new_social").show();
});

这是ajax加载函数：

jQuery.ias({
container : '#middle',
item: '.new_story',
pagination: '#pagination',
next: 'a.next',
loader: '<img src="loader.gif"/>',
history: false

 });

这是我获得无限滚动的地方，我认为它在函数调用后面有 jQuery： https ://github.com/webcreate/Infinite-Ajax-Scroll

再次感谢！

4

1 回答 1

-1

听起来事件需要委托给页面加载期间存在的静态父元素。

委托的 a.share 处理程序

$(document).on({
    mouseenter: function(){
        $(this).closest($('div.new_story')).children("div.new_social_buttons").show();
        $(this).closest(".new_social").hide();
    },
    mouseleave: function(){
        //looks like nothing going on here; just providing for future ref.
    }
}, 'a.share');

委托的 div.new_social_buttons 处理程序

$(document).on({
    mouseenter: function(){
        //looks like nothing going on here; just providing for future ref.
    },
    mouseleave: function(){
        $(this).hide();
        $(this).closest($('div.new_story')).children("div.new_social").show();
    }
}, 'div.new_social_buttons');

使用.on()时不能使用正常的.hover()包装方法。相反，您必须提供一个mouseenter and具有其中声明的功能的 mouseleave 对象。

另外，需要注意的是，您应该替换document为任何静态父元素以节省性能。因为 jQuery 的委托选择器利用了 javascript 的querySelectorAll()方法，所以性能提升可以忽略不计，但在深度嵌套的站点上可能会成为负担。这就是为什么我建议绑定到树中较低的静态对象。

于 2013-02-21T23:50:28.283 回答