Question

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

我拥有什么以及我追求的是什么：

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

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

我希望有两个click事件：

一行不是“奖金行”

一个用于在其后面有“奖励行”的行

我尝试了什么和问题：

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

不是“奖金行”的行：$('tr:not(:has(.bonus))')

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

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

$('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'); });

从this answer来看，这是live的已知限制。

我的解决方法

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

以某种方式标记后面有“奖励行”的行

将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/

我认为没有一种纯粹的选择方式可以做到这一点，这并不是一种解决方法 - 我称之为解决问题的有效方法。

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

2 个答案: