Skip to end of metadata
Go to start of metadata

Problem

On a HTML5 iPhone web application we used jQuery live event to dynamically catch the click event of an element on a list (ul) generated by an ajax call, all works perfect on FireFox and Safari (Web), but on an iPhone and on the iOS Simulator iPhone the live event refused to work!!...

jQuery live event code
$("li").live("click", function(){
   more code here...
});

Cause

There is an issue on the mobile version of safari that does not attach the click events to some DOM elements.

Solution

You have to manually attach the click event in the HTML code:

HTML Code
<ul>
    <li onclick=''>
		more tags inside...
    </li>
</ul>

The jQuery code doesn't need any change:

jQuery code
$("li").live("click", function(){
   more code here...
});

Second option:

As stvan Kovacs comments, is possible to add the click event function inside $(document).ready() and use $("li").click instead of $("li").live("click", function(), with this change the bug on Safari (mobile version) is not present  and is not necessary to add the click event tag in the HTML (<li onclick=''>):

$(document).ready(function() {

	$("li").click(function(){
   		more code here...
	});
});

I chose to use .live() because "attach an event handler for all elements which match the current selector, now and in the future.".

But when $(document).ready() is executed, the elements (<li>) are already part of the DOM, then, a normal click event can be used without any problem.

 

 

About the author

Enterprise Web Developer
Joaquin is an Enterprise Web Developer at Base22 with over seven years of experience designing and developing web solutions for enterprise clients. He is a well rounded web developer with skills building interfaces in IBM WebSphere Portal and WCM, IBM Connections, and many others. He is an Oracle Certified Java Developer and a Microsoft Certified Visual Studio Developer. He blogs at http://j-arellano.com

 

  • No labels