title: jQuery replaceWith conflicts with other jQuery
body: <p>Hi I have a div I want to replace.
  The original div and the replacement both have some additional jQuery animations.
  I can replace the old div with content, but when I try to replace it with this div that calls the same animations, I think the animation script is conflicting because the new div is attempting to load but just displays a loading animation spinner.</p>
  
  <p>The original div looks like this</p>
  
  <pre><code>&lt;td class="Products eventChangeProducts"&gt;
  &lt;div class="mosaic-block bar"&gt;&lt;a href="http://localhost/shop/greeting-cards/" class="mosaic-overlay"&gt;
  &lt;div class="mosaicdetails"&gt;&lt;h4 class="mosaicdisplay"&gt;Greeting Cards&lt;/h4&gt;
  &lt;p class="mosaicdisplay"&gt;4x6 Cards with your Photo&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="mosaic-backdrop"&gt;&lt;a href="http://localhost/shop/greeting-cards/"&gt;
  &lt;img src="http://localhost/wp-content/uploads/postcard-300x300.jpg"&gt;
  &lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
  </code></pre>
  
  <p>The jQuery replaceWith is here</p>
  
  <pre><code> jQuery(document).ready(function($){
     $('.eventChangeProducts').replaceWith('&lt;td class="nfpProducts"&gt; 
  &lt;div class="mosaic-block bar"&gt;&lt;a href="http://localhost/shop/facebook-link/" class="mosaic-overlay"&gt;
  &lt;div class="mosaicdetails"&gt;&lt;h4 class="mosaicdisplay"&gt;Facebook Link&lt;/h4&gt;
  &lt;p class="mosaicdisplay"&gt;Post your Picture to Facebook&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="mosaic-backdrop"&gt;&lt;a href="http://localhost/shop/facebook-link/"&gt;
  &lt;img src="http://localhost:8888/wp-content/uploads/facebook-likes-300x300.jpg"&gt;
  &lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;');
  </code></pre>
  
  <p>the jQuery animation is here</p>
  
  <pre><code>jQuery(function($){
     jQuery(".bar").mosaic({
         animation:   
      });
  });
  </code></pre>
  
  <p>I read this - The .replaceWith() method, like most jQuery methods, returns the jQuery object so that other methods can be chained onto it. However, it must be noted that the original jQuery object is returned. This object refers to the element that has been removed from the DOM, not the new element that has replaced it.</p>
  
  <p>So I'm guessing that the jQuery animation is getting called twice and there is a conflict of sorts.</p>
  
  <p>IF so how do I totally remove the first div and replace it with the new div so this doesn't occur?</p>
  
  <p>Or is it something else?</p>