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

Question

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

---

我拥有的和我所追求的:

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

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

我想有两个click活动:

1. 一行不是"奖金行"
2. 一个用于在它们之后具有"奖励行"的行

---

我尝试了什么和问题:

但是,我无法弄清楚如何使用选择器来选择"后面有特定元素的元素"(即"前一个"选择器).因此,我能得到的最好的是:

1. 行不是"奖金行": $('tr:not(:has(.bonus))')
2. 在他们之后有"奖金排"的行: $('tr + tr:has(.bonus)').prev()

这一切都很好,除非我live()在通过遍历获得的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

老实说，我只是使用你的第二个想法并将单击绑定到所有行，然后检查下一行是否有奖金 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/

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