尚未创建的元素的onclick元素_JavaScript

我正在使用Google搜索API，我希望当您单击图像时，该图像将被复制到其他位置。

我在这里创建了一个小提琴： : 它是这样工作的：用户在输入字段中输入术语，然后将显示图像。 当他/她单击两次时，它将显示在image div中。

我将onClick事件侦听器放在searchresults div上，因此一开始就需要额外的点击。 但是，我希望它在第一次单击时显示。

现在，如果我将其注释掉

var searchresults = document.getElementById('searchresults');
searchresults.addEventListener("click", function(event){
  event.preventDefault();
  imageing();
});

它不起作用。 图像将是链接。 我相信这样做的原因是结果显示在gs-image-box ，尚未创建。 我尝试在不同的其他函数（例如searchImg或OnLoad调用imaging函数，但没有任何效果。

我想到了使用检查元素是否单击的功能，这里介绍了

但我认为必须有一种更简单的方法。

我的想法不多了，有人可以提出想法或提示吗？

谢谢！

图像是动态创建的吧？ 签出此帖子

简而言之，事件是在页面加载时附加到元素的。 因此，新创建的动态元素（例如Google创建的动态元素）不会附加到事件中。 因此google可能有一种方法可以规避整个“您需要加载页面以将事件附加到元素”的事情，但这需要额外的点击。 使用帖子中的语法应该会对您有所帮助。

顺便说说。 使用Jquery并不会真正显示您的网站，因为它通常缓存在客户端的浏览器中。

您需要的信息已经在searchresults eventListener 。 即使将事件添加到结构中较高的div上，此event的target也将是您单击的图像。

默认情况下，将从top元素（ window ）一直到接收点击的element一直调度一个javascript event ，然后返回顶部。 作为被单击元素的祖先的任何元素都将接收事件信息，因此您可以侦听任何ancestor ，但是目标仍然是实际被单击的元素。

在您的情况下，只需将目标传递给imageing()函数，就可以应用所需的行为，而无需进行任何其他操作。

您可能会遇到的一个问题是，如果用户单击searchresult而不是img元素。 然后，您将遇到一个错误，因此您应该处理这些情况。

像这样：

var searchresults = document.getElementById('searchresults');
 searchresults.addEventListener("click", function (event) {
     console.log(event.target, this);
     event.preventDefault();
     if(event.target.tagName == 'IMG'){
         imageing(event.target);
     }
 });

function imageing(targetImg) {
     var imageresult = document.getElementsByClassName('gs-image-box');

     var xu = document.getElementById('companylogo');
     var imgsrc = targetImg.src;
     xu.src = imgsrc;

 }

尚未创建的元素的onclick元素

问题描述

1楼

2楼