onclick element for an element that is not created yet

Question

I am using the google search API and I want that when you click on an image, this image will be copied to a different location.

I created a fiddle here: http://fiddle.jshell.net/wjewg062/ It works this way: The user types in a term in the input field and images will be displayed. When he/she clicks on one twice it will displayed in the image div.

I put the onClick event listener on to the searchresults div, hence the extra click in the beginning. However, I want it to be displayed on the first click.

Now, if I comment this out

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

it doesn't work. The images will be links. I believe the reason for this is that the results are displayed in gs-image-box and not created yet. I tried calling the imaging function in different other functions like the searchImg or the OnLoad but nothing work.

I thought of using a check if element is clicked function described here Detect if I'm clicking an element within an element

but I think there must be an easier way.

I'm running out of ideas, can anyone give an idea or hint?

Thanks !

score 2 · Answer 1 · edited May 23 '17 at 12:10

The images are dynamically created right? Check out this post Event binding on dynamically created elements?

In short, events are attached to elements upon pageload. so a newly created dynamic element such as the ones that google creates, aren't attached to the event. so google probably has a way to circumvent the whole "you need to load the page to attach events to elements" thing but it requires an extra click. Using the syntax found in the post should help you.

By the way. Using Jquery doesn't really show down your site because it's usually cached in the client's browser.

Julien Grégoire · Accepted Answer · 2015-07-16T21:25:41.013

The info you need is already in your searchresults eventListener. The target of this event will be the image you click, even if you add the event on a div higher in the structure.

A javascript event will by default be dispatched from the top element (window) all the way through the element that received the click, then will go back to the top. Any element that is an ancestor of the element that was clicked will receive the event info, so you can listen on any ancestor, but the target remains the element that was actually clicked.

In your case, by simply passing the target to your imageing() function, you can apply the behaviors you want without any extra manipulations.

One problem you might face, is if user clicks on searchresult but not on an img element. Then you'll have a bug, so you should handle these cases.

Something like this:

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/

onclick element for an element that is not created yet

2 Answers2