We help IT Professionals succeed at work.

Problem using alert in events in jQuery Mobile on iPhone/iPad

3,350 Views
Last Modified: 2014-02-02
The checkbox in the jQueryMobile html below uses an onClick event to display an alert() popup.
Clicking the checkbox puts a mark in it, and displays the alert. All ok, so far.

However, the event handler is also fired when one thereafter "leaves" the checkbox (clicking outside it, to loose focus)
Thus, the alert is displayed then as well. This is wrong.
Also, the checkbox is un-marked. This is really really wrong! :-)

I get this behaviour ONLY on iPhone/iPad (I'm testing with Safari). It works ok on Android and "computer" browsers (well, actually I haven't tried using Safari on other plattforms maybe this is a Safari issue?)

Does anybody know that happens here?


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel=stylesheet href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<script>
function doclick()
{
  alert('A click');
}
</script>
</head>
<body>
<form>
<div data-role=page id=m_c2main>
<div data-role=content>
  <label><input name=CHECK type=checkbox value=1 onClick="doclick()">A checkbox</label>
</div></div>
</form>
</body>
</html>

Open in new window

Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
function doclick()
{

if($("[name=CHECK]").is(':checked')){
  alert('A click');
}
}

Open in new window

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Use onchange instead onclick :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel=stylesheet href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<script>
jQuery(function($) {
    $("#CHECK").change(function() { alert('A click'); })
});
</script>
</head>
<body>
<form>
<div data-role=page id=m_c2main>
<div data-role=content>
  <input name="CHECK" id="CHECK" type="checkbox" value="1" /><label for="CHECK">A checkbox</label>
</div></div>
</form>
</body>
</html>

Open in new window

Author

Commented:
@cathal, well making sure that "checked" is set is of course a method to avoid the alert when leaving focus on the field. On the other hand, it really shouldn't fire any onClick at all - how to avoid this in jQuery?

However the real problem is not the "double onClick" but rather the fact that the checkbox is cleared when leaving focus.
That's a real pain!
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
the right event for checkbox is NOT onclick but onchange
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
Is that your whole real code above? If not is there a link to the page
There is no reason a 'lost focus'/'some other click' action could fire unless it had been written

Author

Commented:
@leakim971, using onChange results in the exact same behaviour: an extra event when leaving (or what ever happens) the field - and also the checkbox is cleared when clicking outside the field (leaving focus)
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
Your code
http://jsfiddle.net/GaryC123/rLQ88/1/

No double event happening.

Author

Commented:
...and again -- the problem only shows on iPad/iPhone (and/or with mac Safari)
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
And if you load http://jsfiddle.net/GaryC123/rLQ88/1/ on your iphone does it still happen
Cannot replicate any error in Safari.
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
Separate the label from the input and see if it still happens, you may be getting a double click event misfiring because you are technically clicking the label and the input
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
@leakim971, using onChange results in the exact same behaviour: an extra event when leaving (or what ever happens) the field - and also the checkbox is cleared when clicking outside the field (leaving focus)

Did you really tried my whole code, just copy/pasting without any update of your?

Author

Commented:
Sorry @leakim971 and @Cathal, I've been away for a few days.
I really appreciate your input.

However, the problem still persists. The jsfiddle setup also results in incorrect behaviour.
Could you please check out this link:
  http://www.tolva.se/test/ioscheck.htm

It contains links to my code (three versions, using diffrerent means to trigger the event; onclick, onchange and your suggested jQuery change)
All these results in incorrect behaviour on IOS (tested on iPhone and iPad). This is REALLY annoying :-(

Also the page above contains a link to your jsfiddle. It DOES give the same error!
If you click the checkbox to set a mark, and then click "outside" the checkbox (in the same jsfiddle window region) then the "click" is repated, unchecking the box and triggering the event.

As before, only on IOS.

I'd appreciate any feedback on this!
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
the onchange version work fine for me on my iPhone

Author

Commented:
@leakim971, what ios/browser do you use? I've tried with iPhone4 and iPad3
I really get the error all the time on these.

Also, I get it both with Safari and Chrome (tested in iPad)

Do you mean that you CAN repeat the problem with the onclick version, but it works ok for you with the onchange version? Or did you only test the onchange version?

Author

Commented:
A small addition, is that the "frame" around the checkbox+text is "darkened" a little when I click to check the checkbox.
This darkening does not happen on Android or desktop computers.

Do you get such a darkened background on the checkbox field?
And again; do you get it to work on all four versions of the test?
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
iPhone 3
the alert isa native JS function, every browser depending the OS do what he want and as it is native you CAN'T change it but we are off topic now.

Author

Commented:
That's true, but triggering an "extra click", changing the "checked" status on the field - that's plain wrong :-)

It obvisouly has something with the alert(), or confirm(), to do - but I'd say that there must be possible to display an alert/confirm in the event handled for a checkbox onClick/onChange, right?

So the issue is -- what the heck is the problem with the jQueryMobile/IOS combination, when using alert/confirm() in the onClick event handler? :-)
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
I think you've a cde somewhere doing this extra click, I can't understand why I did not get it on my phone and you get it

if you really have this with the onchange demo, it's not about javascript but about your phone, just try it on someone else phone

Author

Commented:
I'm using exactly the samples available at
  www.tolva.se/test/ioscheck.htm

No extra code anywhere, WYSIWYG :-)

And it does not work on iPhone4 and iPad3.
According to you it works on iPhone3 (right?) and I have received some info that it may work OK on iPhone5.

But iPhone4 and iPad3 is "bad enough". And it's not only me, we've tried with several different mobiles and devices.

Is there anyone using iPhone4 that can reproduce the error? Or when using iPad?
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Did you tried the latest jQuery mobile ?
You are usign JQM 1.3 with jQuery 1.9
The last is : 1.4 and 1.10.2

http://jquerymobile.com/

Author

Commented:
The problem exists with 1.4.2 and 1.10.2 as well.

I now added that setup as a separate test in
  http://www.tolva.se/test/ioscheck.htm

Isn't there anybody that can repeat this problem?
Are there anyone that uses iPhone4 (or iPad3), that could test it?

/Stefan
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
What version of IOS are you using? 7?

Author

Commented:
Now I tested iPhone5 myself (iOS 7.02) and the problem exists there as well (with all five test links on my test page)

With iPhone4 I tested with IOS 7.0.4
And with iPad3 I tested with IOS 6

But @x you tested with iPhone3 right? And it worked ok for you?

does anybody test with non-iphone3?
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
I'd say it's clear that IOS devices do have a problem with alert() within onclick/onchange event handlers, as described here.
Note that the behaviour is a little instable, sometimes one may "get it to work ok" once or twice, depending on how one clicks, but eventuelly one always gets into a situation when the error displays.

Yielding to the platform with setTimeout() in the event handler however seems to solve the problem.
Of course this is a little cumbersome when arguments are to be passed to the event handler, one may need to build a framework with global variables etc, but still it is possible to work around the IOS bug.

So, I'd say that setTimeout is a good enough solution to this question.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.