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

expand dad 脚本仍然有效，但有一些不同之处： 在 IE 和 FireFox 上，爸爸和儿子同时调整了大小，所以效果看起来很流畅 好的。但是在Safari和Chrome上这个过程分为两步，先用动画把dad扩到800px，然后用“跳转”变化让儿子到800px，这个“跳转”让后面的过程出错。

我觉得 IE 和 FireFox 以正确的方式处理了这个问题，有人可以帮我修复 Safari 和 Chrome 吗？

Answer 1

jQuery没有replace方法，看来你要使用replaceWith方法。

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

注意replaceWith用另一个元素替换元素，如果你只想改变一个元素的内容，你可以使用html方法。

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