jquery - 如何结合使用 .live() jQuery 和 .hover() ？

Question

我的困境是关于 .live() 和 .hover()。我想要的是，每次我单击“立即购买”按钮时，它都会更新我的侧边栏(更新它不会加载页面)，其中包含购买该商品的人数，并且当我将鼠标悬停在购物车时侧边栏上的图像，它将向我显示完整的购买详细信息(我隐藏了它，因为我希望它只在悬停时显示)。但在我点击“购买按钮”后，看到购买的更新，我尝试将鼠标悬停在侧边栏上，但遗憾的是它没有显示完整的详细信息，然后刷新页面后悬停正常工作。一位 friend 告诉我使用 .live() 但发现它对我来说很复杂，因为我仍然是新手。有人可以指导我吗？ :(

代码:

$('#shoppingCart').hover(
    function(){
        //div
        $('#div_widget').removeClass('hidden');
        $('.cartDivLight').addClass('cartDivDark');

    },
    function(){
        //div
        $('#div_widget').addClass('hidden');
        $('.cartDivLight').removeClass('cartDivDark');
    }
);

，这就是我的脚本的样子，我想集成.live()，但它不起作用。:(

Answer 1

您不需要结合使用 live() 和 hover()。事实上，从 jQuery1.7 开始，您应该使用 jQuery 方法 on() 而不是 live()，后者已被弃用(即从 future 的 jQuery 版本中删除) )。 http://api.jquery.com/on/

live()、delegate()、on() 方法的基本优点是您可以使用它们来执行事件:在尚不存在的元素上悬停、单击等，直到您稍后通过 AJAX、JavaScript 的 createElement 方法等添加该元素。

以下是如何使用on():

$('#container').on('hover', '#clickableElement', function({ console.log('do something'); });

#container 是 #clickableElement 驻留或最终驻留的元素。您也可以使用 document.body 代替，但是 #container 缩小了焦点，因此 jQuery 不必进行太多搜索来查找 #container > 选择器。

这里有一个 jsfiddle 可以帮助您入门:http://jsfiddle.net/trpeters1/WrXVu/44/

鼠标悬停行为有点搞砸，但你会明白的，