Дублируемая цель ajaxSubmit не заменяется

Question

У меня есть следующий код:

$('#refresh').click(function () {

    alert($('.report-container').length);

    $('.report-container').each(function () {

        var accordian = this;
        var url = $(this).children(':first-child').val();

        $('form').ajaxSubmit({
            url: url,
            success: function (responseText, statusText, xhr, $form) {
                $(accordian).html(responseText);
            }
        });

    });
});

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

Я ожидал бы, что это заменит один единственный элемент '.report-container' фрагментом, загруженным с сервера. однако каждый раз, когда это выполняется, вызов к alert($('.report-container').length); увеличивается?

это вызывает всевозможные проблемы. Что мне не хватает?

ftr Я также пытался использовать свойство target в плагине ajaxForm с тем же результатом

Я также могу подтвердить, что сервер отвечает одним и только одним «.report-container» во фрагменте, поэтому это должна быть замена 1 -> 1.

Answer 1

Если у вас действительно есть только один контейнер, и он будет заменен:

$('#refresh').click(function() {
    var container = $('.report-container');
    var url = container.children(':first-child').val();
    $('form').ajaxSubmit({
        url: url,
        success: function(responseText, statusText, xhr, $form) {
            container.replaceWith(responseText);
        }
    });
});

Если вы хотите расширить до нескольких, сохраните / добавьте обратно каждый, но сохраните выбор в "accordian":

$('#refresh').click(function() {
    $('.report-container').each(function() {
        var accordian = $(this);
        var url = accordian.children(':first-child').val();
        $('form').ajaxSubmit({
            url: url,
            success: function(responseText, statusText, xhr, $form) {
                accordian.replaceWith(responseText);
            }
        });
    });
});

Answer 2

Для замены элемента используйте .replaceWith().

html() заменяет содержимое элемента. Итак, после замены вы получите:

<div class="report-container">
    <div class="report-container">

        ....

    </div>
</div>