ajaxSubmit 目标被复制而不被替换答案

【问题标题】：ajaxSubmit target being duplicated not replacedajaxSubmit 目标被复制而不被替换
【发布时间】：2012-02-16 13:17:26
【问题描述】：

我有以下代码：

$('#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); 的调用都会增加？

这会导致各种问题 obv - 我错过了什么？

我也尝试在 ajaxForm 插件上使用 target 属性，结果相同

我还可以确认服务器响应片段中只有一个“.report-container”，因此它应该是 1 -> 1 替换。

【问题讨论】：

标签： javascript jquery ajax ajaxform

【解决方案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);
        }
    });
});

如果您希望扩展到多个，请保留/添加每个，但将选择缓存在“手风琴”中：

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

【讨论】：

【解决方案2】：

要替换元素，请使用.replaceWith()。

html() 替换元素的内容。所以更换后你得到：

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

        ....

    </div>
</div>

【讨论】：