jQuery動態內容在更新時消失/崩潰（丟失高度和寬度）

Question

除了一個問題，我幾乎完成了我最近的項目。

我有一個購物車，最小化爲標準和位置固定在右上角。點擊時，會顯示錶格，顯示籃子中的產品。當再次點擊時，它被最小化。相當標準的東西。這裏是切換效果的代碼：

$('.widget #close').toggle(function() { 
     $(".widget form").slideDown(400); 
     $('.widget').animate({width: 300}, 400); 
     $(this).addClass("mini") 
    }, function() { 
     $(this).removeClass("mini") 
     $('.widget').animate({width: 110}, 400); 
     $(".widget form").hide(400); 
    }); 

這工作得很好。我的問題是：被切換的表格內的內容是動態創建的。我的意思是，當你點擊將產品添加到籃子裏時，名稱和數量就會通過JavaScript（wordpress插件）添加到表單中。如果您在添加產品時最小化表格，那麼一切正常，但如果您打開購物車以顯示內容，則添加產品以更新所顯示的內容，整個表格將消失（我認爲它會失去它的創建寬度和高度）。然後您必須再次最小化並再次最大化以查看內容。

你可以在現場演示中看到這個例子 - http://intelligentstudios.co.uk/superior/#products如果你添加一個產品，打開右上方的購物車，一切正常。將購物車保持打開狀態，然後添加其他產品，您將看到問題。

非常感謝幫助。

我的一個想法是添加一個事件到最小化購物車的購買按鈕。這打破了切換效果，因爲您必須點擊兩次以使購物車最大化。

Answer 1

我沒有在您的JavaScript文件中看到更新購物車框的代碼，但您可以在元素上觸發click s關閉並打開購物車框，以便正確更新視圖：

變化：

$("#products form input[type=submit]").click(function(){ 
    $(".updated").show().animate({opacity: 1.0}, 1000).fadeOut(500); 
}); 

要：

$("#products form input[type=submit]").click(function(){ 
    $(".updated").show().animate({opacity: 1.0}, 1000).fadeOut(500); 
    $('#close').trigger('click'); 
    setTimeout(function() { 
     $('#close').trigger('click'); 
    }, 500); 
}); 

爲了測試這一點，你可以在我的代碼只需添加通過Fireb頁面ug的控制檯。

UPDATE

所以，如果你看一下在Firebug購物車的盒子，你可以看到那個被通過AJAX添加的形式是隱藏的，所以如果你添加代碼，以顯示它，你應該得到的預期的行爲：

function load_cart(values){ 
    $("#wpchkt_widget").load(wpchkt_c_url, values,function(){ 
     $(".preload_img").hide(); 
     $("#wpchkt_widget .update_cart").hide(); 
     buttons_events();     
    }); 
}