更新時に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 plugin）によって名前と数量がフォームに追加されます。あなたが商品を追加するときにフォームが最小化されていれば、すべて正常に機能しますが、カートを開いてコンテンツを表示している場合は、コンテンツを更新するように商品を追加してフォーム全体が消えるようにします幅と高さ）。その後、コンテンツを見るために最小化して最大化する必要があります。

この例はライブデモで見ることができます。http://intelligentstudios.co.uk/superior/#products製品を追加すると、カートの右上が開き、すべて正常に機能します。カートを開いたままにして別の製品を追加すると、問題が表示されます。

お願いします。

私の考えの1つは、カートを最小限に抑える購入ボタンにイベントを追加することでした。これにより、トグル効果が破られますが、カートを最大限に活用するには2回クリックする必要があります。

Answer 1

ショッピングカートボックスを更新するJavaScriptファイルのコードは表示されませんが、エレメントのclickがトリガーして、ショッピングカートボックスを閉じて開き、ビューを正しく更新します。

変更：

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

あなたは放火犯のショッピング・カート・ボックスを見ればだから、AJAX経由で追加される形が隠されているので、あなたはそれを表示するためのコードを追加した場合、あなたが得るべきであると見ることができます期待される動作：

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