定位动态添加的元素答案

【问题标题】：Targeting Dynamically Added Elements定位动态添加的元素
【发布时间】：2016-02-16 07:32:24
【问题描述】：

我正在尝试针对通过 javascript 动态加载的页面上的多个项目。我正在使用的代码如下，如果项目在加载时存在于 DOM 中，它可以正常工作。

$(".target-item").each(function(i, element) {
   var innerURL =  $(this).html()
   $(element).html("<img src='"+ innerURL + "'>");
});

这可能吗？

【问题讨论】：

你试过了吗？ stackoverflow.com/questions/18698842/…
不确定这将如何适用于我的情况？我可能会补充一点，动态添加的项目是由 wordpress 而不是我自己放在那里的，这是否对问题有任何影响。
它们是如何准确加载的？
您只想确保在更改 DOM 后定位它们。实际上并没有什么不同，您只需在回调函数中定位它们——例如，在 ajax 调用的成功处理程序或动画循环的“完成”处理程序中。在您的示例中，您可以在将图像添加到页面后将它们定位在闭包中。

标签： javascript jquery

【解决方案1】：

您发布的代码仅适用于页面上当前的 DOM 元素。这就是脚本的本质，它运行一次然后就结束了——所以你以后添加到页面的任何东西都不会受到影响。

您提到您的 WordPress 主题/插件中的某些内容负责将这些项目添加到 DOM。最简单的方法是查看那个js，看看是否有办法与之集成。它在执行此操作后是否触发事件（您可以侦听该事件然后执行您的操作）？它是否允许您指定在执行此操作后要运行的回调函数（您可以将 img src 逻辑作为函数提供给它）？如果没有办法与之集成......好吧，这就是使用第三方代码的缺点。

但是，我认为您应该能够在将元素添加到页面时调用此逻辑，而不管它是如何发生的。每个 DOM 元素在加载到页面时都会触发一个“加载”事件，因此您可以监听它。但是，这些元素还不存在，因此您无法将事件侦听器绑定到它们——您必须使用event delegation，并将事件绑定到目标元素的父元素。以下是它的外观：

var targetParent = jQuery('.some-div-that-contains-dynamic-elements');
targetParent.on('load', '.target-item', function() {
  var $this = jQuery(this);
  var innerURL =  $this.html();
  $this.html("<img src='"+ innerURL + "'>");
});

在这里，您在包含您的目标项目的元素上绑定了一个事件侦听器。当一个新的目标项被添加到 DOM 中时，它会触发 load 事件，冒泡到父项，并触发事件处理程序。

【讨论】：

【解决方案2】：

所以你有一个 div 或其他东西，里面是你用 img 元素替换的 url 对吗？问题是你不知道哪个已经被替换了？

如果我是对的，你可以使用“.target-item :not(:has(img))”。使用该选择器，您将获得所有具有类 .target-item 但没有 img 元素作为子元素的元素。

【讨论】：