jquery - click handler not firing in chrome after css transition -

jquery - click handler not firing in chrome after css transition -

i have 2 divs alternate/flip sides using css transition.

transform: rotatex(90deg) translatez($cube-height*1.7);

i have click handler applies both divs, first 1 triggers event.

$('.cube-face').on('click',function(){ window.location = ($(this).attr('data-draw-link')); });

i have created a fiddle demonstrate this, click handler show alert window. have read similar questions yet find solution problem. have tried changing back-face-visibility , perspective without success.

how click handler fire sec div?

this bug occurs in chrome.

use click on parent element, , compare "e.target" "this".

//go draws results on click $('#resultsflipper').on('click',function(e){ if(e.target == this){ alert("green"); } else { alert("red"); } });

here updated fiddle

jquery css3