在没有回调函数的情况下更改 jQuery 中的动态内容

Question

很长一段时间以来，我一直在寻找一个好的答案，但似乎无法就一种简单的方法达成共识。似乎许多以前的方法已被弃用。

基本上使用 HubSpot 平台，我正在创建一个自定义页面。该页面有一个动态添加的部分。由于没有我可以使用的回调函数，并且 .load() 或 .ready() 似乎不适用于动态内容。如何获取这些需要几秒钟才能加载的 DOM 元素？

Answer 1

.load 和 .ready 等待 DOM 加载。这将是服务器输出的原始 html，这意味着任何动态加载的内容都将不存在，因此无法被操纵。

最简单的方法是使用JQuery .ajaxComplete() 并将其附加到文档中。

基本上，它会变成这样：

$(document).ajaxComplete(function() { /* Do Stuff */ });

不利的一面是，它会在任何 ajax 调用完成时触发，而不仅仅是您所追求的，因此如果它是一个处理速度较慢的函数，它将导致您的页面严重滞后。

最好的办法是将它与条件语句一起使用，以查看您想要操作的数据是否已加载。例如。如果您想在加载后修改具有“foo”类的元素，您可以执行以下操作：

$(document).ajaxComplete(function() { if($('.foo').length) { /* Element exists since length is greater than 0, do stuff */ });

它仍然会在每次 ajax 调用时触发，但至少这样它不会导致您的页面滞后太多，因为条件语句将在文档加载之前失败。

此外，根据您要对元素执行的操作，您可能需要添加一些方法来检查它是否已被处理（例如，通过创建一个布尔变量，当您查看元素是否存在时检查该值，然后进行修改后进行更改）。