Safari和Chrome无法处理新添加的元素

Question

我有问题，请帮忙。

我有这样的模板：

<div id="dad">
     <div id="son" style="width: 100%">
     some code
     </div>
</div>

然后我有一个通过jQuery动画扩展dad-div的动作

$('#dad').animation({'width': 800px}, 500);

此刻，儿子和爸爸的宽度均为800px，对我来说很好。

但是当我使用ajax从服务器中获取一个新的子元素并替换旧的子元素时，Safari和chrome发生了奇怪的事情：

    $.get(url, extraData, function(response) {
        $('#son').hide('slide', null, 500, function(){
            $('#son').replaceWith(response);
            $('#son').show('slide', {direction: 'right'}, 500);
        });
    });

扩展爸爸脚本仍然有效，但是有一些区别：在IE和FireFox上，同时调整了父亲和儿子的大小，因此效果似乎很流畅好的。但是在Safari和Chrome上，此过程分为两个步骤，首先用动画将爸爸扩展到800px，然后通过“跳转”更改将儿子扩展到800px，然后此“跳转”会使以后的过程出错。

我认为IE和FireFox以正确的方式处理了此问题，有谁能帮助我修复Safari和Chrome？

Answer 1

jQuery没有replace方法，似乎您想使用replaceWith方法。

$('#son').replaceWith(response);

请注意，replaceWith将元素替换为另一个元素，如果只想更改元素的内容，则可以使用html方法。

$('#son').html(function(){
   return $(response).html();
});