Question

我的困境是关于.live（）和.hover（）。我想要的是，每次点击我的“立即购买”按钮，它都会更新我的侧边栏（更新它不会加载页面），其中包含购买该项目的数量，以及我何时悬停购物车侧边栏上的图片，它会显示完整的购买详情（我隐藏了，因为我希望它只显示在悬停时）。但是，在我点击“购买按钮”后，看到购买的更新，我试图将鼠标悬停在侧边栏上，但遗憾的是它没有显示完整的详细信息，然后在我刷新页面后，悬停工作正常。一位朋友告诉我使用.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()，这种方法已被弃用（即从未来的jQuery版本中删除）。 http://api.jquery.com/on/

live()，delegate()，on()方法的基本优势在于您可以使用它们来执行某项操作：悬停，点击等等。 t存在，直到你稍后通过AJAX，JavaScript的createElement方法等

添加该元素

以下是on()：

的使用方法

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

#container是#clickableElement所在或最终将驻留的元素。您也可以使用document.body，但#container会缩小焦点，因此jQuery不必搜索尽可能多的#container选择器。

这是一个让你入门的小提琴：http://jsfiddle.net/trpeters1/WrXVu/44/

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

Answer 2

让我们假设您的侧边栏的结构如下：

<div id="sidebar">
    <div class="shoppingCart">
        <div class="static">
            //icon & title
        </div>
        <div class="purchase_details">
            ...
        </div>
    </div>
    <div class="shoppingCart">
        <div class="static">
            //icon & title
        </div>
        <div class="purchase_details">
            ...
        </div>
    </div>
</div>

然后相应的javascript将是：

$('#sidebar').on('mouseenter', '.shoppingCart', function() {
        var $this = $(this);
        $this.find('.static').addClass('cartDivDark');
        $this.find('.purchase_details').show();
    }).on('mouseleave', '.shoppingCart', function() {
        $this.find('.static').removeClass('cartDivDark');
        $this.find('.purchase_details').hide();
    }
);

这不是100％正确，因为我没有看到您的HTML，但它应该展示必要的原则。

注意：

.on()取代jQuery 1.7.1中的.live()，.delegate()和.bind()。
我们使用.on()代表当前和未来的购物车将事件处理委托给侧边栏。
您无法使用.on('hover' ...)委托悬停，但您可以委派悬停的两个组件事件，mouseenter和mouseleave。
侧边栏内的所有内容都是按类标识的，而不是ID。这允许我们编写广义的mouseenter和mouseleave处理程序，这些处理程序对悬停元素中的元素进行操作。

如何使用.live（）jQuery和.hover（）组合？

2 个答案: