CODEWITHSUNDEEP
jqueryiphoneweb-applications
Gazzer
Gazzer

Reputation: 4656

How do I use jQuery for click event in iPhone web application

When I use jQuery for a simple click event it only works for links. Is there a way to make it work for spans etc:

$("span.clicked").live("click", function(e){alert("span clicked!")});

$("a.clicked").live("click", function(e){alert("link clicked!")});

The SPAN works in Safari but not Mobile Safari (on iPhone or iPad) whereas the A tag works in both.

Upvotes: 44

Views: 57533

Answers (8)

mcdado
mcdado

Reputation: 728

When targeting iOS you have to take the following into consideration: doing event delegation in jQuery like $(document).on('click', '.target-element', function (event) {...}); will not work. You have to add either onclick="" to the target HTML element or cursor: pointer to its styles.

Taken and adapted from http://gravitydept.com/blog/js-click-event-bubbling-on-ios:

It turns out that Safari on the iPhone does not support event delegation for click events, unless the click takes place on a link or input. Fortunately there are workarounds available.

That's the reason while the <a> tag works while <span> doesn't.

Upvotes: 1

nosensus
nosensus

Reputation: 1740

My approach to solve this misunderstanding on document.click.

  1. Add into html after tag body next tag

    <body> <div id="overlaySection" onclick="void(0)"></div> ... </body>

  2. Some style for that tag

    `#overlaySection {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  content: "";
}
#overlaySection.active {
 opacity: 1;
 visibility: visible;
}`

  3. Some JQuery staff

    // hide overlay on document click $('#overlaySection').click(function(){ $(this).removeClass('active'); });

and the main thing to active this overlay

$('.dropdown > span').click(function() {
    ...
    $('#overlaySection').addClass('active');
    ...
});

Hope this approach will be useful to someone. Happy coding!

Upvotes: 0

Sam
Sam

Reputation: 563

You need to listen for the "touchstart" and "touchend" events. Add the listeners with jQuery...

$('span').bind( "touchstart", function(e){alert('Span Clicked!')} );

You may wish to listen for a touchstart and touchend so that you can verify that the element targeted when the finger touched is the same as the element targeted when the finger was removed.

I'm sure there is probably a better way to do it but that should work :)

Edit: There is a better way! See https://stackoverflow.com/a/4910962/16940

Upvotes: 28

Charlie Schliesser
Charlie Schliesser

Reputation: 8247

You can add an empty onclick attribute, like so:

<span onclick=''>Touch or Click Me</span>
jQuery('span').live('click', function() { alert('foo'); });

Upvotes: 2

CupawnTae
CupawnTae

Reputation: 14580

You can also coax the browser to generate click events by adding an empty onclick attribute. For a belt-and-braces approach in case either approach stops working in any given iOS update, you could use something like this:

$("span.clicked").live("click", function(e){alert("span clicked!")})
                 .attr('onclick','')
                 .css('cursor','pointer');

(assuming you don't have any actual onclick attributes you don't mind obliterating)

Upvotes: 2

mhenry1384
mhenry1384

Reputation: 7688

I tried everything and none of the tricks worked. It turned out I couldn't get click events because I had a video element under my img. video elements apparently eat click events.

Upvotes: 1

MonOve
MonOve

Reputation: 1111

You actually don't need to use the touchstart or touchend event, so long as the 'span' tag (or anything other than an 'a' tag) has a css property of:

cursor:pointer

the click will register

Upvotes: 21

Plynx
Plynx

Reputation: 11461

I struggled with this as well. After lots of toying around and trying to figure out the problem, I came across a simple solution.

If you set the element's cursor to pointer, it magically works again with Jquery's live and the click event. This can just be set globally in the CSS.

Upvotes: 130

Related Questions