Search code examples
javascriptjqueryipaddelegation

jQuery .on() and .delegate() doesn't work on iPad

If you try this snippet on desktop, everything works.
Whenever you try it on iPad, it won't do anything.

$('body').on('click', '#click', function() {
    alert("This alert won't work on iPad");
});
div { 
  font-size: 24px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">Click here</div>

Simple .click() handler works, but it isn't what I want. The same applies for .delegate(); and .live()

Is it a bug or something?

Solution

  • It's a Safari mobile bug/feature : click events won't bubble all the way up to body.

    Adding onclick="" is a known workaround, but IMHO it's easier to attach your listener on a first child of <body>.

    See: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html