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

Posted

技术标签:

【中文标题】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 &gt; 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);
);

【讨论】:

以上是关于AngularJS再次加载初始内容后无法在DOM上使用JQuery的主要内容,如果未能解决你的问题,请参考以下文章

在 angularjs 生命周期的哪个阶段完全加载了 DOM

如何在AngularJS中通过AJAX加载数据后重新初始化数据表?

AngularJS、D3 和 JQuery 在同一页面中。 D3 无法读取正确的 DOM 尺寸

AngularJS 初始化

angularJS 初始化

使用 angularJS 和 DOM 修改加载 100 个用户的数据