Safari Mobile breaks jquery.live()

By Nelson Mendes|Apple, iOS, iPad, iPhone, Mobile, Web Development|Be the first to comment!

The live() method of jQuery is a blessing for dynamic interfaces. It allows you to attach events to dynamically created elements.

Say you want to create a dynamic menu based on some live data read from a server. Maybe you want to create some HTML like this:

<nav>
<ul>
	<li id="nav1" class="btn">item1</li>
	<li id="nav2" class="btn">item1</li>
	<li id="nav3" class="btn">item1</li>
	<li id="nav4" class="btn">item1</li>
</ul>
</nav>

With jQuery you can dynamically generate clickable elements like this:

$(".btn").live("click", function(){
var elem = event.target.id;
alert("you clicked: " + elem);
});

This works well in the desktop and in every browser but on Mobile Safari it fails.

A workaround is to deliberately add an “onclick” attribute to the element you want to attach the event:

<ul>
	<li id="nav1" class="btn" onclick="">item1</li>
</ul>

Share this post.

• 
• 
• 

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
•