iOS bind javascript function to clicking on

Question

This works in desktop safari, but in the iOS version no alert pops up. Is it possible to bind to the 'html' element in iOS? I want to close a drop-down menu whenever the user clicks somewhere else on the page.

$('html').bind("click", function(){alert("clicked!")})

EDIT

Posting this as html since jsfiddle embeds in an iframe, which apparently gets rid of my issue. Opening this page on desktop safari works fine, but in the iOS simulator it doesn't show anything on clicking.

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function(){  
        $('html, body').bind("click", function(){alert("html or body")})
        $(document).bind("click", function(){alert("document")})
      });
    </script>
  <body>
  </body>
</html>

EDIT 2

This also doesn't work for me in the iOS simulator or on my iPhone. I do get the alerts if I put the delegate() in my app and click on a link.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<body>
</body>
<script type="text/javascript">
  $(document).delegate('html, body', "click", function(){alert("html or body")});
</script>
</html>

EDIT 3

This works!

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<body>
  <div id="stuff">applesauce</div>
  <div>other stuff</div>
</body>
<script type="text/javascript">
  $(':not[#stuff]').on( "click", function(){alert("not stuff")});
</script>
</html>

Why would $('body') work instead? Is there a reference somewhere that says to listen on body? — spike, Feb 08 '12 at 20:26
I don't have any references but each device handles javascript a little differently so iOS might use $('html') a little differently. — Joel Kravets, Feb 08 '12 at 20:30
I just looked through the jquery code http://code.jquery.com/jquery-1.7.1.js and found this in the initialization, if ( selector === "body" && !context && document.body ) {...}. There was nothing similar for the "html" so I'm assuming they would leave that part up to the device instead of manually handling it like they do for the body. — Joel Kravets, Feb 08 '12 at 20:34
I'd be surprised if this is a jQuery issue, and the part of the code you linked to seems to just be an optimization for the selector. — spike, Feb 08 '12 at 21:05
See my answer here: http://stackoverflow.com/a/29897871/2338825 — texelate, Apr 27 '15 at 14:00

ShankarSangoli · Answer 1 · 2012-02-08T20:09:05.620

0

Use document or body element instead of html

    $(document).bind("click", function(){
          alert("clicked!")
    });

You can also try this.

    $('html, body').bind("click", function(){
          alert("clicked!")
    });

edited Feb 08 '12 at 20:09

answered Feb 08 '12 at 19:50

ShankarSangoli

69,612
13
93
124

Jason · Accepted Answer · 2013-05-08T04:29:00.073

0

jQuery.click() doesn't function properly on iOS. I suspect that you're having the same problem with bind(). jQuery.delegate() however does work.

$('html').delegate('body', 'click', function(){ alert("body"); });

Should work for you. Presumably on() will also function, but I haven't had a chance to try it yet.

As an aside, you should move that script block below the body tag and lose the $(document).ready().

Update: In any recent vintage of jQuery, on(event, selector, function) is the way to go. It works on IOS and resists leaking event handlers.

$('body').on('click', ':not[#stuff]', function(){ alert("not stuff"); });

edited May 08 '13 at 04:29

answered Feb 08 '12 at 21:58

Jason

3,021
1
23
25

I don't have my iPad in front of me, so I can't check. But I think the target mattered as well. Try my edit above. – Jason Feb 09 '12 at 00:23
It's possible that this won't work, if you're trying to catch any click on the page. Because of the touch interface, Safari does some weird things to interpret what your finger is actually doing. When I needed to be able to close an element when I clicked away, I used a selector for "not the element shown" instead of body, and that was working fine. – Jason Feb 09 '12 at 00:26
No dice. I tried $('html').on('click', 'body', ...) as well to no avail (worked in desktop so I think I did it right). Is there somewhere I can go read about these iOS issues? – spike Feb 09 '12 at 00:29
Cool. For completeness I should also probably note that in the event handler you'll have to check that the parents(elementSelector) returns an empty set as well. Because clicking on a DOM element inside of the popup will also trigger 'click'. – Jason Feb 09 '12 at 23:32
jQuery has evolved a lot in the last 18 months. Let me adjust my answer – Jason May 08 '13 at 04:23

iOS bind javascript function to clicking on

2 Answers2

Linked