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 > 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加载数据后重新初始化数据表?