Question

A while ago, i posted a question about a parent div not reacting to a click event because it’s children seemed to be obscuring it. I couldn’t replicate it without showing a bunch of code and didn’t really want to because it seems like a lot to ask, but since I’m still having the problem, I hope someone will take the time to look through this. I am quite befuddled!

Using vktemplate to take a json object and insert it into my page like so: ( i think this is the only relevant part, but the whole code is here…about another 50 lines. )

<div class='order_and_lines_container_div' id='order_container_<%= o[order]['order_header'].order_number %>' >

    <div id="order_details_button_<%=o[order]['order_header'].order_number %>" class='fl order_details_trigger' >

    <% if ( o[order]['order_header'].reference ) { %>

        <input type='hidden' id="reference_<%= o[order]['order_header'].order_number %>" value="<%= o[order]['order_header'].reference %>" />

    <% } %>

        <!-- //shipping data-->
        <input type='hidden' id='ship_to_name' value="<%= o[order]['order_header'].ship_to_name %>" />

        <input type='hidden' id='ship_to_address_1' value="<%= o[order]['order_header'].ship_to_address1 %>" />

        <input type='hidden' id='ship_to_address_2' value="<%= o[order]['order_header'].ship_to_address2 %>" />

        <input type='hidden' id='ship_to_city' value="<%= o[order]['order_header'].ship_to_city %>" />

        <input type='hidden' id='ship_to_zipcode' value="<%= o[order]['order_header'].ship_to_zipcode %>" />



        <% var escaped_title_for_customer = (o[order]['order_header'].name).replace("'", "");

        escaped_title_for_customer = (escaped_title_for_customer).replace('"', ''); %>


        <div class='fl cell_div for_customer_div clip' value='<%= escaped_title_for_customer %>'>

            <div class='tooltip' style='width:215px;overflow:hidden;' title='<%= escaped_title_for_customer %>'>

            <%= o[order]['order_header'].name %>

            </div>

       </div>


       <div class='fl cell_div order_number_div' id='order_number_div_<%= o[order]['order_header'].order_number %>'>

       <%= o[order]['order_header'].order_number %>

       </div>       

       <div class='fl cell_div order_status_div'>

       <%= o[order]['order_header'].status %>

       </div>

       <div class='fl cell_div order_date_div'> 

       <%= o[order]['order_header'].order_date %> 

       </div>

       <div class='fl cell_div scheduled_ship_date_div'>

       <%= o[order]['order_header'].due_date %>

       </div>


        <% if ( o[order]['order_header'].order_description ) {


            var escaped_title_description = (o[order]['order_header'].order_description).replace("'", "");

            escaped_title_description = (escaped_title_description).replace('"', ''); %>

            <div class='fl cell_div project_name_div tooltip' value='<%= escaped_title_description %>' title='<%= escaped_title_description %>'>

            <%= o[order]['order_header'].order_description %>

            </div>


        <% } %> 


         <div class='cb'></div>  

     </div>

//more

<% } %>

I generate this html:

rendered, it looks like

I am trying to do something when the div with the id order_details_trigger is clicked (pop up a modal with more detailed information), but right now, it is only firing when I click in the tiny spaces between the divs that have the information in (where i’ve put the red boxes in the screen shot).

Any ideas on why this is happening? Thank you if you made it through all this!

Answer 1

Add pointer-events: none; to the style of the child divs.