Search jQuery

jQuery Forum

Beta1 'onclick' does not work on iPhone

in jQuery Mobile • 11 years ago

We are experiencing an issue where inline onclick elements are not working.

The onclick attribute is not working at all, despite my attempts to change the jquery mobile global settings for tap/click.

We've got a lot of complex javascript and need to be able to use onclick.

I've boiled it down to this simple example, which works with Firefox & droid but NOT with iPhone:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Mobile</title>
<link rel="stylesheet" href="/js/jquery/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="/js/jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
//apply overrides here
$.mobile.useFastClick = false;
});
</script>
<script type="text/javascript" src="/js/jquery/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="f" id="mainContent" data-fullscreen="true">
<div id="headerDiv" data-role="header" data-theme="f" data-position="fixed" data-id="my-header" data-backbtn="false">
</div>
<div id="contentDiv" data-role="content" data-theme="f">
<a href="#" onclick="alert('hello')">Click Here</a>
</div>
<div id="footerDiv" data-role="footer" data-theme="a" data-position="fixed" data-id="my-footer" >
</div>
</div>
</body>
</html>

Thanks for your help!

Replies(11)

mdhari

Re: Beta1 'onclick' does not work on iPhone

11 years ago

I had a similar issue on the iPad. It works on my Android devices but not iOS stuff. Found out it was because I had to bind it to the jQuery Event "vclick" and now it works. Since you're using the JS attr onclick, I'm not sure.

samspot

Re: Beta1 'onclick' does not work on iPhone

11 years ago

We found two workarounds:

<a href="javascript:alert('hello');">Hello</a>
<a href="javascript:void(0);" onclick="alert('goodbye');">Goodbye</a>

These will work for our purposes. Is using onclick with href="#" incorrect? If no, then this should probably be considered a jquery mobile bug.

mankindk

Re: Beta1 'onclick' does not work on iPhone

11 years ago

I have the exact same problem

if i use something like

<a href="#" data-role="button" onclick="javascript:logout();"> Logout </a>

It works in Chrome and on Safari, but not on the iPhone

However if i use the button type

<button id="test" onclick="javascript:logout();"> Logout </button>

It works on Chrome, Safari and the iPhone.. However, it would be very nice, to be able to use both ways

samspot

Re: Re: Beta1 'onclick' does not work on iPhone

11 years ago

Yeah the problem seems to rest with the usage of href="#", my coworkers think jquery mobile may be hijacking that for some purpose.

This was the primary thing that broke for us when upgrading from the alpha to the beta. Hopefully they are willing to address this. Yes i know there are workarounds, but sometimes when you are building markup in javascript and passing it around, it becomes difficult to use bind way down the call stack without a big refactor.

In our case, we'd have to either parse through the generated markup so we would know what id's to use in our bind, or pass the markup back in some other structure that carries that information. Our use case is a long list of items where we need to call a javascript function like this on the click or tap event: setEntityId(id);

stefan.ge..

Re: Beta1 'onclick' does not work on iPhone

11 years ago

Try this:

<a id="logout" href="#" data-role="button">Logout</a>

$('#logout').live('vclick', logout);

fredramsey

Re: Beta1 'onclick' does not work on iPhone

11 years ago

Why not just bind to 'tap'? It seems to work for both.

Game Master Apps

Darwin Software

stefan.ge..

Re: Beta1 'onclick' does not work on iPhone

11 years ago

Virtual events abrstracts away from mouse and tap events. If you bind to vclick instead of tap or click your app works on Desktop and on touch devices. Its quite useful...

vantheman..

Re: Beta1 'onclick' does not work on iPhone

11 years ago

I've got an app where I populate the list from database and use it like this:

<a href="#" onClick='doSomething(object.id);'... (use the id from the object that I get from ajax-call to php-script)

for each item in the list. I could change my code to set use the id for each link like:

<a href="#" id="object.id"...
and in my vclick-event catch wich li-id that was clicked like:

$('ul[id="my_ul_id"] a').live("vclick", function (evt) {

doSomething($(this).attr('id'));

});

This works but some problem might occur in my app when several li's are used and will use same id's.
Any better ideas how to solve this problem?

samspot

Re: Re: Beta1 'onclick' does not work on iPhone

11 years ago

Hi vanthemaniac,

If you are worried about the id problem, you can switch to using classes, since an element can have more than one css class.

As mentioned before, if you change your '#' to 'javascript:void(0)' you can work around this limitation.

<a href="javascript:void(0);" onclick="doSomething(object.id);"...

My app is like yours, except we pull the items through ajax when the page is already loaded.

vantheman..

Re: Beta1 'onclick' does not work on iPhone

11 years ago

We also pull the items from ajax when the page is loaded. In fact we've got several pages, that loads different kind of data to each list. That's why my concern about using id's. On one page the id is the customer id presented on the list item, and on next page id is the product id. Both times a click on the list should trigger an ajax-call and load the next page using that id as the key.
Maybe it would work with classes but it feels wrong setting a class to 1000,1001,1002 etc.

I'll use the javascript:void(0); for now I guess...

Thx!