Динамическое содержимое 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 на элементе #close, чтобы закрыть и открыть окно корзины покупок, которое обновит смотреть правильно:

Изменение:

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

Чтобы проверить это, вы можете просто добавить мой код на страницу через консоль Firebug.

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