jQuery替换与其他jQuery冲突

嗨，我有一个div要替换。 原始div和替换版本都有一些额外的jQuery动画。 我可以用内容替换旧的div，但是当我尝试用调用相同动画的这个div替换它时，我认为动画脚本是冲突的，因为新的div正在尝试加载，但只是显示一个加载动画微调器

原来的div是这样的

<td class="Products eventChangeProducts">
<div class="mosaic-block bar"><a href="http://localhost/shop/greeting-cards/" class="mosaic-overlay">
<div class="mosaicdetails"><h4 class="mosaicdisplay">Greeting Cards</h4>
<p class="mosaicdisplay">4x6 Cards with your Photo</p></a></div>
<div class="mosaic-backdrop"><a href="http://localhost/shop/greeting-cards/">
<img src="http://localhost/wp-content/uploads/postcard-300x300.jpg">
</a></div></div></td>

我读过这篇文章-与大多数jQuery方法一样，.replaceWith（）方法返回jQuery对象，以便将其他方法链接到该对象上。但是，必须注意，返回的是原始jQuery对象。此对象引用已从DOM中删除的元素，而不是替换它的新元素

所以我猜jQuery动画被调用了两次，并且出现了一些冲突

如果是这样，我如何完全删除第一个div并用新div替换它，这样就不会发生这种情况

---

还是其他原因？

将jQuery函数放在页脚中（而不是放在页眉中）似乎有助于解决这个问题

 jQuery(document).ready(function($){
   $('.eventChangeProducts').replaceWith('<td class="nfpProducts"> 
<div class="mosaic-block bar"><a href="http://localhost/shop/facebook-link/" class="mosaic-overlay">
<div class="mosaicdetails"><h4 class="mosaicdisplay">Facebook Link</h4>
<p class="mosaicdisplay">Post your Picture to Facebook</p></a></div>
<div class="mosaic-backdrop"><a href="http://localhost/shop/facebook-link/">
<img src="http://localhost:8888/wp-content/uploads/facebook-likes-300x300.jpg">
</a></div></div></td>');

jQuery(function($){
   jQuery(".bar").mosaic({
       animation:   
    });
});