1

This is my code: http://jsfiddle.net/bnookala/b2Yz8/3/ and this is the result: http://jsfiddle.net/bnookala/b2Yz8/3/embedded/result/

The behavior is pretty straightforward: after clicking on the red div, the 3D transform occurs and the blue div is made visible. Trying to reverse this behavior (by removing the flip class), however, does not work. The second jQuery.bind does not receive the click event - it is being captured by the red div. This is also apparent in that the input box (in the blue div) cannot receive mouse focus. I've tried setting z-indexes to solve this problem, but that doesn't seem to work.

bhargav
  • 164
  • 8

1 Answers1

1

Change the target of your click event and this will work:

$("#card").on('click', function () {
    $(this).toggleClass('flip');                
});
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Toggling the class doesn't fix the problem of being unable to give input focus to the text input, though. – bhargav Jan 18 '12 at 18:44
  • 1
    after flip, add: $('.face input').focus() – Diodeus - James MacFarlane Jan 18 '12 at 18:53
  • Well, that's one way to get around it... But I'm looking more for a solution done through CSS. What if I have other types of content than just the text input, for example? i.e: If I had a button in the blue div, how could I expect any bound functions to actually fire when clicked? – bhargav Jan 18 '12 at 19:43
  • You have a click hander for the wrapper, this will also trigger on the child elements. Read this: http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing – Diodeus - James MacFarlane Jan 18 '12 at 19:45
  • Sorry for seeming stubborn - but wouldn't handlers on ".face.front" and ".face.back" only target the child elements? Something still doesn't seem right here. – bhargav Jan 26 '12 at 11:09