title: Can't use JQuery on DOM after initial content loaded again by AngularJS
body: <p>Please be kind as this is my first ever question here, and it's challenging to explain concisely. </p>
  
  <p>I'm working with an application which uses <code>AngularJS</code> to render content through an accordionized checkout funnel. I need to manipulate certain elements of the DOM after they are rendered and chose JQuery for this purpose.</p>
  
  <p>Everything I need to do works perfectly when moving through the process from start to finish. However, if one chooses an option to move back (specifically to change their shipping address after they've already moved through that section), and AngularJS binding is invoked again, and from that point forward my JQuery appears visually to do nothing.</p>
  
  <p>Here's the part that vexes me: All of the JQuery does actually still execute the second time through just as it did the first time though; however, I can only see these changes in the console, not on the page.</p>
  
  <p>It's as if what JQuery is still holding on to is still there somehow, and it can act on it, but what's displaying on page is a completely new set of objects now, and JQuery is still working with what was there the first time through.</p>
  
  <p>It's a massive set of code and many complexities here, but I will try to give some hooks by way of example:</p>
  
  <p>First of all, everything I'm doing here is wrapped in a <code>$( document ).ready</code> function, and then all of the work is done via a <code>$('#ShippingSubmit').on('click')</code> function with a <code>setInterval()</code> function listening for when the content I need to manipulate in the next panel of the accordion has been rendered. From there, find some elements and depending on conditions, manipulate them. </p>
  
  <p>Here's a stripped done example of code to give a better picture:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
    $('#ShippingSubmit').on('click', function () {
      var pcShippingTabsLoaded = setInterval(function () {
        if ($('#pcShippingTabs').length &gt; 0) {
          window.clearInterval(pcShippingTabsLoaded);
          $('#pcShippingTabs li a').each(function (index) {
            // manipulate stuff here, like hide tabs
          });
        }
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="StatusIndicators" data-ng-show="showShippingEditArea()" style=""&gt;
      &lt;a id="btnEditCO" class="pcButton secondary" href="javascript:;" data-ng-click="switchPanel('shipping')"&gt;Edit&lt;/a&gt;
  &lt;/div&gt;
  &lt;button type="button" class="pcButton pcButtonLogin" data-ng-click="updateShipping()" name="ShippingSubmit" id="ShippingSubmit"&gt;
      &lt;img src="images/sample/pc_button_update.gif" alt="Submit" /&gt;
      &lt;span class="pcButtonText"&gt;Continue&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul id="pcShippingTabs" class="nav nav-tabs"&gt;
      &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#TabCUSTOM"&gt;Other Shipping Options&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="#TabFedExWS"&gt;FedEx&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="#TabUPS"&gt;UPS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="#TabUSPS"&gt;USPS&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Again, the proceeding straight though from the <code>$('#ShippingSubmit').on('click')</code> listener, everything works perfectly, but then click on the edit anchor which reloads the content, I get this curious result:</p>
  
  <p>All of my <code>console.log()</code>'s show that all of the objects are there and I can do things like <code>.addClass</code> and log that being added to an object here, but none of that shows in the browser or when inspecting element. </p>
  
  <p>It seems to me that the set of JQuery objects found the first time through still exist somewhere and can be manipulated, but they are no longer the objects being displayed after the DOM elements were reloaded via AngularJS.... and, if that's true, I can't seem to find a way to clear them out and start over on the next instance of <code>$('#ShippingSubmit').on('click')</code></p>