当我替换内部 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 （包装器）的内容被替换了。

是这个原因吗？

有解决方法吗？

谢谢！

Answer 1

如果#animate-both 位于#swrapper 中，是的，这是有原因的。

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

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

$(document).ready(function () {

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