jquery - 在没有回调函数的情况下更改 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 调用时触发，但至少这样它不会导致您的页面滞后太多，因为条件语句将在文档加载之前失败。

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