jQuery $.live() 不适用于 iPhone 上的表格行

发布于 2024-09-05 21:44:13 字数 1510 浏览 5 评论 0 原文

我正在使用 jQuery 的 $.live() 函数使表格行可点击。
在 Chrome、Firefox 甚至桌面 Windows Safari 上完美运行,但在 iPhone 上则不行。
$.bind() 可以在任何地方使用,但出于显而易见的原因,我想使用其他函数。

有谁知道为什么它不起作用以及如何修复它?
下面的示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
 <title>test</title>
 <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() {
    alert($(this).text());
  });
  */
  /* $.live() doesn't */
  $('table').find('tr').live('click', function() {
    alert($(this).text());
  });
});
 </script>
</head>
<body>
 <table>
  <tbody>
   <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>
  </tbody>
 </table>
</body>
</html>

I'm making table rows click-able with jQuery's $.live() function.
Works perfectly on Chrome, Firefox and even desktop Windows Safari -- but not on the iPhone.
$.bind() 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">
<head>
 <title>test</title>
 <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() {
    alert($(this).text());
  });
  */
  /* $.live() doesn't */
  $('table').find('tr').live('click', function() {
    alert($(this).text());
  });
});
 </script>
</head>
<body>
 <table>
  <tbody>
   <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>
  </tbody>
 </table>
</body>
</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

冷︶言冷语的世界 2024-09-12 21:44:16

此代码的一个问题是您使用了 .live 错误 - 它应该直接在选择器上调用:

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

来自 规格

不完全支持 DOM 遍历方法来查找要发送到 .live() 的元素。相反,.live() 方法应该始终在选择器之后直接调用

接下来,在 jQuery 1.4.2 上,最好使用 委托

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

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(){/* ... */} );
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文