AngularJS再次加载初始内容后无法在DOM上使用JQuery

Posted 2023-05-09

【中文标题】AngularJS再次加载初始内容后无法在DOM上使用JQuery

【英文标题】：Can't use JQuery on DOM after initial content loaded again by AngularJS

【发布时间】：2016-03-28 07:52:58

【问题描述】：

请客气，因为这是我在这里的第一个问题，而且要简明扼要地解释是很有挑战性的。

我正在使用一个应用程序，它使用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"  />
    <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') 的下一个实例的方法

【参考方案1】：

根据@tasseKATT 的建议，我在再次运行后解决了我的问题。

事实证明，虽然 $('#pcShippingTabs') 需要 setInterval 等待它首次加载到 DOM 时，但当使用编辑选项通过 $('#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);
);