I previously asked a question about a parent div not responding to click events because its children were blocking it. Unfortunately, I couldn't recreate the issue without sharing a lot of code, which I didn't want to do. However, since I am still facing this problem, I'm hoping that someone can take the time to analyze this situation. I am quite puzzled!
Using vktemplate to insert a JSON object into my page like this: (I believe this is the relevant part, but the entire code is available here...about another 50 lines.)
<div class='order_and_lines_container_div' id='order_container_<%= o[order]['order_header'].order_number %>' >
// Code snippet here...
</div>
//more
<% } %>
When rendered, it appears as:
The issue arises when I attempt to trigger an action when clicking on the div with the ID order_details_trigger, such as opening a modal with detailed information. However, currently, the event only fires when I click in the small spaces between the content-containing divs (indicated by red boxes in the screenshot).
Any insights into why this behavior is occurring? Thank you for reading through all of this!