Make entire DIV block clickable

Question

I have a script on my site and using jQuery it makes the variation-value div element clickable.

Unfortunately the areas with the p & div tags aren't clickable. Is there an easy fix for this?

jsfiddle example ::: http://jsfiddle.net/xb4qkdLu/ :::

<div class="variation-value">
    <p class="left" style="background:green">left aligned text</p>
    <div class="right" style="background:red">right aligned text</div>
    <p></p>
</div>

Answer 1

What I'm seeing in the jsfiddle you posted afterward, is that you are binding the click to the td element within the variation class ( $('.variation').on('click', 'td', function(event){... ).

Based on what you wrote, and the comment I've left under your original post, hooking a click trigger listener to the .variation-value' class would solve this for you (as you've currently got no events tied to it).

If you would like to supplement you original script, you would either have to go around with some CSS "hack", by adding to the css of p and span within the td the following pointer-events:none; (will require some extra IE fine-tuning), or you could also add the other elements within the td to the trigger listener.

Code sample:

The CSS would be like (considering normal-case browser):

.variation-value > p, .variation-value > div { pointer-events:none; }

The Jquery would be:

$('.variation-value').on('click', function(event){ ... }

Do keep in mind that your left element is bound to reset your values list if it is visible (haven't found any trigger set for the right element). If you are enabling a click-through effect for all the elements within your .variation-values , you are losing the reset-effect bound to the left element. Is that surely what you are looking to achieve? If so, just go wihout the above CSS snippet, and you will have it all function as you would like.

Also just to note, in your HTML markup, you are putting elements in the following hierarchy:

div.variation-value
    p[left]
        div[right]

You aren't closing your p element before adding in the div for the right element that is it becomes a child of the p . I'm assuming you should've closed the p tag to ensure functionality as intended.

Answer 2

http://jsfiddle.net/hasecbinusr/pctgs5ke/

$(document).ready( function(e) {
  $('.variation-value').click(function () {
    alert('You clicked it!');
  });
});