CODEWITHSUNDEEP
javascriptjqueryajaxjquery-events
user1549151
user1549151

Reputation: 61

My jQuery function can only operate the first time

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.

Upvotes: 1

Views: 817

Answers (2)

The Alpha
The Alpha

Reputation: 146201

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

Upvotes: 2

Ohgodwhy
Ohgodwhy

Reputation: 50787

$(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

Upvotes: 0

Related Questions