0

I have a custom web dashboard that relies heavily on jQuery, jQuery UI, and jquery-ui-touch-punch. Everything works except for click events on dynamic content (js added elements) on an iPad.

So this works everywhere 

$('.foo').click( function() {
    //whatever
});

but events on dynamic content doesn't work on an iPad, like this

$('body').on('click', '.foo', function() {
    //whatever
});

The dashboard monitors stuff in real-time, so events on dynamic elements are a must. Any ideas on how to fix?

forlogos
  • 11
  • 6

2 Answers2

0

Depending on your jQuery version, you may need delegate. Also, target at the document level, and reverse the selector/event order, like so:

$(document).delegate('.foo', 'click', function() {
    //whatever
});

on may still work, in which case, your selector/event order is right, just target it at the document level.

elzi
  • 5,442
  • 7
  • 37
  • 61
  • tried it (delegate) and targeting the document. Both didn't work on an iPad. It did lead me to work on trying bind(), and that works!! – forlogos Nov 25 '14 at 22:14
  • Glad to hear it! Looks like `on` and `delegate` are known issues for mobiles afari, as per [this post](http://stackoverflow.com/questions/10165141/jquery-on-and-delegate-doesnt-work-on-ipad). I've modified my answer if it's close enough and you want to accept it, though! – elzi Nov 25 '14 at 22:19
  • `delegate`, `bind`, and `on` are all aliases of the same function, so I have a hard time believing just changing the function from `on` to `bind` worked. As I know from first hand experience, and as has been detailed in the thread referenced in your **edit**, setting `cursor: pointer` on an element that requires a click handler is the correct way to get `click` handlers working on iOS devices. Proof they are aliases: https://github.com/jquery/jquery/blob/master/src/event/alias.js#L24 – Adam Jenkins Nov 25 '14 at 22:23
  • @Adam you're right... looks like the error is elsewhere. Editing answer to remove misinformation. – elzi Nov 25 '14 at 22:30
  • @Adam interesting about setting cursor: pointer on the element. I would not have tried it on the particular project my question was for since the dashboard was built for Windows 8 tablets -- then a higher-up brought his own device... – forlogos Nov 25 '14 at 22:57
0

I tried delegate() as per @elzi's answer, but it didn't work. Saw bind() in the jquery documentation in the same breath as on() and delegate(), tried it and it works!!

$( ".foo" ).bind( "click", function() {
    //whatever
});
forlogos
  • 11
  • 6