f__x f__x - 1 year ago 61
jQuery Question

jQuery $.live() doesn't work with table rows on the iPhone

I'm making table rows click-able with jQuery's


Works perfectly on Chrome, Firefox and even desktop Windows Safari -- but not on the iPhone.

works everywhere, but for obvious reasons I'd like to use the other function.

Does anyone have any idea why it doesn't work and how can I fix it?

Example code below.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no,width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">table { width: 100%; border-collapse: collapse; } table tr { background: #eee; } table td { padding: 10px; border-top: 1px solid #ccc; }</style>
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
/* $.bind() works */
$('table').find('tr').bind('click', function() {
/* $.live() doesn't */
$('table').find('tr').live('click', function() {
<tr><td>words are flying out \ </td><td>like endless rain into a paper cup</td></tr>
<tr><td>they slither while they pass \ </td><td>they slip away across the universe</td></tr>

Answer Source

One problem with this code is that you're using .live wrong - it should be called directly on the selector:

$('table tr').live( /* ... */)

From the specs:

DOM traversal methods are not fully supported for finding elements to send to .live(). Rather, the .live() method should always be called directly after a selector

Next, on jQuery 1.4.2, it's probably better to use delegate:

$('table').delegate('tr', 'click', function(){/* ... */} );