click event only gets parent div

Question

I am having issues with onclick events triggered on parent elements but not on children. I have an image grid created through JavaScript:

HTML div:

JavaScript to append images to this image-grid div:

var columnDiv = document.createElement('div');
columnDiv.setAttribute('class', 'column');

// create content div inside column
var contentDiv = document.createElement('div');
contentDiv.setAttribute('class', 'content');
contentDiv.setAttribute('data-animation_url', element['animation_url'])
contentDiv.setAttribute('data-image_url', element['image_url'])
// create image and append to contentDiv
var image = document.createElement('img');
image.setAttribute('src', image_gateway_url);
image.setAttribute('style', 'width:100%');
contentDiv.appendChild(image);
// add image name
var caption = document.createElement('span');
caption.setAttribute('class', 'image-name')
caption.innerHTML=element['name'];
contentDiv.appendChild(caption);

// append content div to column and append it to the grid
columnDiv.appendChild(contentDiv);
document.getElementById('image-grid').appendChild(columnDiv);

CSS:

#image-grid{
    margin: auto;
    position:absolute;
    z-index: -1;
}

.column {
    float: left;
    width: 25%; 
    height: 35vh;
    position: relative;
    z-index: 0;
  }

.content {
    background-color: white;
    padding: 10px;
    position: relative;
    z-index: 1;
  }

JavaScript code for click event:

$('div').click(function() {
    var myClass = this.className;
    alert(myClass);
      });

When clicking on images, the event triggers the alert 'gallery-grid' wherever I click. From other posts I would expect the event to trigger on children first then work its way up towards the parent but for some reason it is not the case here...

Does anyone happen to know how I could access the 'content' class div with my onclick event to redirect users to the page relevant to the image they clicked ?

Thank you

Maybe it has something to do with event bubbling and capturing. You can read more here: https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing — Norse, Apr 06 '21 at 17:42
How is the provided example related to the question? `this` in an event handler refers to the element the event was attached, if you want the actual target, pass the event object, and retrieve `event.target`. — Teemu, Apr 06 '21 at 17:44
Thank you very much for your help, the problem was indeed due to my misuse of this instead of event.target. I will post my updated code which now iterates over all parents elements until it finds the div with the class I am interested in — Aurian, Apr 06 '21 at 18:36

score 0 · Answer 1 · answered Apr 06 '21 at 18:38

The issue was caused by the use of this instead of event.target.

This code now allows to iterate over all parent divs until I find the one I am interested in:

    $('div').click(function(event) {
    let currentElement = event.target;
    while(currentElement.className != 'content') {
        currentElement=currentElement.parentNode;
    };
    alert(currentElement.className);

})

click event only gets parent div

1 Answers1