Question

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

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

这可能吗？

Answer 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 + "'>");
});

这里，您将绑定包含目标项的元素上的事件侦听器。当一个新的target-item被添加到DOM时，它会发生load个事件，起泡到父节点，并触发事件处理程序。

Answer 2

所以你有一个div或者什么内部是你的url，你用img元素替换了吗？而问题是你不知道哪一个已被替换？

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

针对动态添加的元素

2 个答案: