对于尚未创建的元素,单击Onclick元素



我正在使用谷歌搜索API,我想当你点击一个图像,这个图像将被复制到不同的位置。

我在这里创建了一个提琴:http://fiddle.jshell.net/wjewg062/它是这样工作的:用户在输入字段中输入一个词,图像就会显示出来。当他/她点击一个两次,它将显示在imagediv。

我将onClick事件侦听器放在searchresultsdiv上,因此在开始时额外单击。但是,我希望在第一次单击时显示它。

现在,如果我把这个注释掉

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

它不起作用。图像将是链接。我认为这样做的原因是结果显示在gs-image-box中,尚未创建。我尝试调用imaging函数在不同的其他函数,如searchImgOnLoad,但没有工作。

我想使用这里描述的检查元素是否被单击的函数来检测我是否点击了元素中的元素

但我认为一定有更简单的方法。

我想不出主意了,谁能给点建议或提示吗?

谢谢!

图像是动态创建的,对吗?查看这个帖子事件绑定动态创建的元素?

简而言之,事件在页面加载时附加到元素上。因此,新创建的动态元素(如Google创建的动态元素)不会附加到事件上。所以谷歌可能有办法绕过整个"你需要加载页面以将事件附加到元素"的事情,但它需要额外的点击。使用文章中的语法应该会对您有所帮助。

顺便说一下。使用Jquery并不能真正显示您的站点,因为它通常缓存在客户端的浏览器中。

您需要的信息已经在您的搜索结果eventListener。此eventtarget将是您单击的图像,即使您将事件添加到结构中更高的div上。

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

在您的示例中,通过简单地将目标传递给imageing()函数,您可以应用您想要的行为,而无需任何额外的操作。

您可能面临的一个问题是,如果用户单击searchresult而不是img元素。那么你就会有一个bug,所以你应该处理这些情况。

像这样:

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;
 }
http://fiddle.jshell.net/pwjLrfnt/3/

最新更新