当我替换内部div时jQuery动画的问题

Question

页面部分是：

<div id="cartslide">
    <div id="swrapper">
        content goes here
    </div>
</div>

jquery animate部分：

$(document).ready(function () {

$('#animate-both').click(function () {
   $('#cartslide').animate({
       opacity: 'toggle',
       height: 'toggle'
    });
  });
});

到目前为止，这完美无缺。当我更换内容时出现问题 “swrapper”部分，有：

           $.ajax({
                type: "POST",
                url: "cart/slider",
                data: dataString,
                cache: false,
                success: function(html){
                     $("#swrapper").replaceWith(html);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                     alert(errorThrown + ' '+ textStatus);
                }
           });

内容被替换（我可以用firebug看到它），但它将不再切换 “cartslide”的内容，附带的div。

我很惊讶这一点。我认为它会起作用，但它没有，我想因为内部div（swrapper）的内容被替换了。

这是原因吗？

有解决方法吗？

谢谢！

Answer 1

如果#animate-both位于#swrapper，是的，则有理由。

当您附加时，事件附加到部门，意味着附加一次。如果替换它，则包含该事件的项目不再存在。

解决方法是使用jQuery的live函数，这意味着即使创建了一个（包括替换），它也可以工作：

$(document).ready(function () {

$('#animate-both').live( 'click', function () {
   $('#cartslide').animate({
       opacity: 'toggle',
       height: 'toggle'
    });
  });
});