文章/答案/技术大牛

发布

社区首页 >问答首页 >我的Jquery函数只工作一次

问我的Jquery函数只工作一次
EN

Stack Overflow用户

提问于 2013-07-21 21:19:27

回答 2查看 809关注 0票数 1

嘿，我试着做一个自定义脚本来显示购物车。我认为我最近的完成，但我有一个问题，它只能调用函数一次。

在http://articles-authors.com/order-form/上，你可以在右上角看到购物车，当网站加载时，已经加载了一个函数来创建购物车。但是，当试图悬停在购物车上时，没有发生任何事情，它应该调用另一个函数来重新创建购物车，并将该类设置为html元素#cart的活动类。

代码如下：

首先是调用cart创建函数的函数

makeCartWithoutActive();
$("#cart").mouseenter(function(){
makeCartWithActive();
}).mouseleave(function(){
makeCartWithoutActive();

})；

原因是使用mouseenter是因为我使用了jquery 2.0.3，而live在1.7中被删除了。

在这里，您可以看到应该重新创建购物车的函数，然后将类设置为活动的#cart，以便显示购物车

function makeCartWithActive(){
$.get("http://articles-authors.com/order-form/cart/get",function(data) {
  var html = "";
    if(data.msg === false){
      html = '<div id="cart" class="right active">'+
            '<div class="heading"><a><span id="cart-total">0 item(s) - $0.00</span></a></div>'+
            '<div class="content"><div class="empty">'+data.respone+'</div></div></div>';
     $("#cart").replaceWith(html);

     }else{

     html = '<div id="cart" class="right active"><div class="heading"><a><span id="cart-total">'+data.totalitem+' item(s) - $'+data.totalprice+'</span></a></div>'+
            '<div class="content"><div class="mini-cart-info"><table><tbody>';

    $.each(data.data, function(i, currProgram) {
         $.each(currProgram, function(key,val) {
            html += '<tr><td class="name">'+val.name+'</td><td class="quantity">x '+val.quantity+
                    '</td><td class="total">$'+val.price+'</td><td class="remove"><img src="http://articles-authors.com/order-form/img/remove-small.png'+
                    '" onclick="RemoveItem('+val.rowid+');" width="12" height="12" title="Remove" alt="Remove"></td></tr>';
        });
    });

      html += '</tbody></table></div>'+
            '<div class="mini-cart-total"><table><tbody><tr><td align="right"><b>Sub-Total:</b></td><td align="right">'+data.totalprice+'</td></tr><tr><td align="right"><b>Total:</b></td><td align="right">'+data.totalprice+'</td></tr></tbody></table></div>'+
            '<div class="checkout"><a class="button" href="http://articles-authors.com/order-form/cart">Checkout</a></div></div></div>';


     $("#cart").replaceWith(html);
 }},

"jsonp");

}

希望有人能帮我。我还不熟悉jQuery/JavaScript，所以不知道为什么会发生这种情况

提前感谢

ajax

jquery

javascript-events

javascript

回答 2

Stack Overflow用户

发布于 2013-07-21 21:25:58

使用委托事件处理程序

$(document).on('mouseenter', '#cart', function(){
    makeCartWithActive();
});

$(document).on('mouseleave', '#cart', function(){
    makeCartWithoutActive();
});

或者您可以使用

$(document).on({
    "mouseenter" : function(e) { makeCartWithActive(); },
    "mouseleave" : function(e) { makeCartWithoutActive(); }
}, "#cart");

票数 2

Stack Overflow用户

发布于 2013-07-21 21:25:47

$(document).on('mouseenter', '#cart', function(){
    makeCartWithActive
}).on('mouseleave', '#cart', function(){
    makeCartWithoutActive
});

您将替换元素，因此处理程序将消失。您需要将函数委托给最接近的静态父元素。

我选择document，但是为了提高性能，您应该选择更接近#cart的文档

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17772737

复制

相似问题

问我的Jquery函数只工作一次
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的Jquery函数只工作一次EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的Jquery函数只工作一次
EN