$ (document).on(‘click’, with Safari

If you're wondering why $ (document) .on ('click', does not work in Safari, here's the solution.

As many people already know, Safari is going to be the next Internet Explorer and needs more and more customizations to work as well as the other Browsers. In this case, i had a problem with Safari using the on click function of jQuery. Let’s come directly to the solution.

This does not work for all Safari mobiles / tablets

$(document).on('click', '#anyHTMLelement', function(event) {
    event.preventDefault();
    // Some code to be executed after #anyHTMLelement is Touched or clicked
});

This will work well for all Safari mobiles / tablets

$(document).on('click touchend', '#anyHTMLelement', function(event) {
    event.preventDefault();
    // Some code to be executed after #anyHTMLelement is Touched or clicked
});

Instead of touchend you can use another trigger options too. Here you get a list with their names and when they are triggered according to MDN:

  • touchstart
    The touchstart event is fired when a touch point is placed on the touch surface.
  • touchend
    The touchend event is fired when a touch point is removed from the touch surface.
  • touchmove
    The touchmove event is fired when a touch point is moved along the touch surface.
  • touchcancel
    The touchcancel event is fired when a touch point has been disrupted in an implementation-specific manner (for example, too many touch points are created).