我的jQuery函数只能第一次运行

Question

I have try to make a custom script to show shopping cart. I think I have nearly finished but I have a problem with it where I can only call the function once.

On http://articles-authors.com/order-form/ you can see the cart in right top and when the website load a function has been load to create the cart. But when the try to hover over the cart nothing happen and there should it call another function to recreate the cart and set the class a active class to the html element #cart .

Here is the code:

First the function to call the cart create function

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

The reason is using mouseenter is because I use jQuery 2.0.3 and live has been remove in 1.7 I think.

Here you can see the function there should recreate the cart and then set the class active to #cart so the cart will show:

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");

}

Hope someone can help me. I'm still new to jQuery/JavaScript so have no idea why this happen.

Answer 1

Use delegated event handlers

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

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

Or you can use

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

Answer 2

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

you're replacing the element, so the handler disappears. You need to delegate the function to the closest static parent element.

I choose document, but for performance, you should choose something closer to #cart