Search code examples
javascriptjqueryiosraphaelmagnific-popup

jQuery click event ignored on iOS

I'm adding a raphael-sketchpad into a magnific-popup to make it possible to draw on top of a photo. I can't get the button to clear the sketchpad to work on iOS. The clear button is a div with bootstrap class "btn" to make it look and act like a button so it already has cursor: pointer added like some people report helping.

Here's a test case http://codepen.io/creativetags/pen/BrsAp

Tap/Click on the image to open the popup then you can draw on it and try the Clear button.

This is the code to catch the click event on the button:

$(document).on('click', '#editor_clear', function(){ 
  console.log('clicked clear'); 
  sketchpad.clear();
});
Solution

  • For iOS devices you'll need to listen for touchstart, too:

    $(document).on('click touchstart', '#editor_clear', function() { 
  console.log('clicked clear'); 
  sketchpad.clear();
});