jQuery 遍历 +现场事件处理程序

Question

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

---

我拥有的和我想要的：

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

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

我想要两次 click< /code> events：

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

---

我尝试过的内容和问题：

但是，我无法工作了解如何使用选择器来选择“后面有特定元素的元素”（即“前一个”选择器）。因此，我能得到的最好结果是：

1. 不是“奖励行”的行： $('tr:not(:has(.bonus))')
2. 具有“奖励行”在他们之后： $('tr + tr:has(.bonus)').prev()

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

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

我收到此错误：

未捕获的异常：语法错误， 无法识别的表达：)

---

问题作为一个更小的示例：

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

HTML：

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

JS：

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

似乎来自 此答案表明这是 live 的已知限制。

---

我的解决方法

作为参考，我的解决方法是：

1. 以某种方式标记后面有“奖励行”的行
2. 将 click 绑定到所有行，然后进行检查查看处理程序中它们后面是否有“奖励行”。

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

干杯

Answer 1

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

将用 .live 方法做你想做的事。

对于所有将来使用谷歌到达这里的人。

uncaught exception: Syntax error, unrecognized expression: )

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

Answer 2

老实说，我只是使用你的第二个想法并将单击绑定到所有行，然后检查下一行是否有奖金 td，如下所示：

$('tr:not(:has(.bonus))').live('click', function () {
    if ($(this).next().children('td').hasClass('bonus')) {
       alert('next row has bonus td');
    }
    else {
       alert('next row does not have bonus td');
    }
});

小提琴位于此处： http://jsfiddle.net/7gdqc/2/

我不认为有一个纯粹的选择器方法可以做到这一点，这并不是真的解决方法 - 我将其称为解决您问题的有效解决方案。