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);的呼叫都会增加？

这是造成各种问题obv - 我缺少什么？

FTR我还用在给ajaxForm插件的目标属性与相同的结果

我还可以确认的是，服务器与一个响应，只有一个“报告容器”的片段所以应该尝试成为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); 
     } 
    }); 
}); 

，如果你想扩展到不止一个，保持/加回每个但缓存“手风琴”中的选择：

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