AngularJS再次加載初始內容後，無法在DOM上使用JQuery

Question

請客氣一點，因爲這是我第一次遇到這樣的問題，並且要精確地解釋這個問題非常具有挑戰性。

我正在使用一個應用程序，該應用程序使用AngularJS通過手風琴化的結帳漏斗呈現內容。我需要在呈現DOM後處理某些元素，併爲此選擇JQuery。

我需要做的一切工作完美的過程中，從頭到尾的過程。但是，如果選擇退回選項（特別是在已經移動該部分之後更改其送貨地址），並再次調用AngularJS綁定，並且從那時起，我的JQuery在視覺上看起來什麼都不做。

下面是讓我煩惱的部分：儘管第一次，所有的JQuery實際上仍然執行第二次。但是，我只能在控制檯中看到這些更改，而不是在頁面上。

這就好像JQuery仍然堅持什麼仍然存在，它可以對它做出反應，但頁面上顯示的是一組全新的對象，而JQuery仍在處理那裏的東西第一次通過。

這是一個巨大的代碼集和許多複雜在這裏，但我會努力通過舉例的方式給予一定的掛鉤：

首先，一切我在這裏做包裝在一個$(document).ready功能，那麼所有的工作都是通過$('#ShippingSubmit').on('click')函數完成的，setInterval()函數監聽當我需要在手風琴的下一個面板中操作的內容何時被渲染。從那裏，找到一些元素並根據條件操縱它們。

下面是一個代碼剝離做過例如提供更好的畫面：

$(document).ready(function() { 
 
    $('#ShippingSubmit').on('click', function() { 
 
    var pcShippingTabsLoaded = setInterval(function() { 
 
     if ($('#pcShippingTabs').length > 0) { 
 
     window.clearInterval(pcShippingTabsLoaded); 
 
     $('#pcShippingTabs li a').each(function (index) { 
 
      // manipulate stuff here, like hide tabs 
 
     }); 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="StatusIndicators" data-ng-show="showShippingEditArea()" style=""> 
 
    <a id="btnEditCO" class="pcButton secondary" href="javascript:;" data-ng-click="switchPanel('shipping')">Edit</a> 
 
</div> 
 
<button type="button" class="pcButton pcButtonLogin" data-ng-click="updateShipping()" name="ShippingSubmit" id="ShippingSubmit"> 
 
    <img src="images/sample/pc_button_update.gif" alt="Submit" /> 
 
    <span class="pcButtonText">Continue</span> 
 
</button> 
 
<ul id="pcShippingTabs" class="nav nav-tabs"> 
 
    <li class="active"><a data-toggle="tab" href="#TabCUSTOM">Other Shipping Options</a></li> 
 
    <li><a data-toggle="tab" href="#TabFedExWS">FedEx</a></li> 
 
    <li><a data-toggle="tab" href="#TabUPS">UPS</a></li> 
 
    <li><a data-toggle="tab" href="#TabUSPS">USPS</a></li> 
 
</ul>

再次，程序直儘管從$('#ShippingSubmit').on('click')聽衆，一切完美，但隨後點擊編輯錨重新加載的內容，我得到這個奇怪的結果：

我所有的console.log()的顯示，所有的對象都在那裏，我可以做像.addClass這樣的事情，並在日誌中添加一個對象在這裏，但沒有顯示在瀏覽器或檢查元素。

在我看來，第一次發現的JQuery對象集仍然存在於某處並且可以被操縱，但它們不再是通過AngularJS重新加載DOM元素之後顯示的對象....並且，如果這是真的，我似乎無法找到一種方法來清除它們並重新開始下一個實例$('#ShippingSubmit').on('click')

Answer 1

我根據@ tasseKATT的建議在另一次運行後解決了我的問題。

事實證明，當需要setInterval等待它第一次加載到DOM爲$('#pcShippingTabs')，使用編輯選項時，通過$('#ShippingSubmit').on('click')回來再次通過，$('#pcShippingTabs')還在那裏，只是被隱藏了。因此，隨後的點擊事件將在AngularJS重新加載內容之前找到元素。

我需要傾聽的不是什麼時候$('#pcShippingTabs').length > 0而是因爲可見。

這裏的解決方案：

$(document).ready(function() { 
    $('#ShippingSubmit').on('click', function() { 
    var pcShippingTabsLoaded = setInterval(function() { 
     //if ($('#pcShippingTabs').length > 0) { 
     if ($('#pcShippingTabs').is(':visible')) { 
     window.clearInterval(pcShippingTabsLoaded); 
     $('#pcShippingTabs li a').each(function (index) { 
      // manipulate stuff here, like hide tabs 
     }); 
     } 
    }); 
    }); 
}); 

或者，以@ tasseKATT的建議：

var pcShippingTabsLoaded; 

$(document).on('click', '#ShippingSubmit', function() { 
    pcShippingTabsLoaded = setInterval(function(){ 
     if ($('#pcShippingTabs').is(':visible')) { 
      window.clearInterval(pcShippingTabsLoaded); 
      $('#pcShippingTabs li a').each(function (index) { 
       // manipulate stuff here, like hide tabs 
      }); 
     } 
    },100); 
});