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();     
    }); 
}