jquery-selectors - jQuery 遍历 + 实时事件处理程序

Question

我在将实时事件处理程序附加到特定行时遇到一些问题。

<小时/>

我拥有什么和我追求什么:

我有一些 HTML，在页面加载后动态生成，如下所示:

<table>
   <tr>
      <td></td>
   </tr>
   <tr>
      <td class="bonus"></td>
   </tr>
   <tr>
      <td></td>
   </tr>
 </table>

我想要两个点击事件:

1. 一个用于非“奖励行”的行
2. 一个用于后面有“奖励行”的行

<小时/>

我尝试过的方法和问题:

但是，我无法弄清楚如何使用选择器来选择“后面有特定元素的元素”(即“上一个”选择器)。因此，我能得到的最好结果是:

1. 不是“奖励行”的行:$('tr:not(:has(.bonus))')
2. 后面有“奖励行”的行:$('tr + tr:has(.bonus)').prev()

这一切都很好，除非我在通过遍历而不是纯选择获得的 jQuery 对象上使用 live() 方法，即

$('tr:has(.bonus)').prev().live('click', function() {
   alert('hello');
});

我收到此错误:

uncaught exception: Syntax error, unrecognized expression: )

<小时/>

这个问题是一个更简单的例子:

我希望这已本地化到我正在使用的某些脚本，但我已将其隔离到一个最小的 jsFiddle 示例，该示例仍然为我复制了该问题:http://jsfiddle.net/ptvrA/

HTML:

<div></div>
<div id="target"></div>

JS:

$('#target').prev().live('click', function () {
   alert('f');
});

好像来自this answer这是 live 的已知限制。

<小时/>

我的解决方法

仅供引用，我的解决方法是:

1. 以某种方式标记后面有“奖励行”的行
2. 将click绑定(bind)到所有行，并检查处理程序中这些行后面是否有“奖励行”。

但如果我能得到一个“更好”的解决方案，即使是出于好奇，以防我在不同的情况下遇到这个问题，我也会很感激。

干杯

Answer 1

$('tr + tr:has(.bonus) ~ tr') //for row whose next sibling is a bonus row

将使用 .live 方法执行您想要的操作。

献给所有将来使用 Google 来到这里的人。

uncaught exception: Syntax error, unrecognized expression: )

发生这种情况是因为 .live() 使用为 jQuery 链中的第一个调用提供的原始选择器。它不考虑在初始 $('selector') 之后使用的其他方法。