Question

I’m having some issues with attaching live event handlers to particular rows.

---

What I have and what I’m after:

I have some HTML that will be generated dynamically after page load as follows:

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

I would like to have two click events:

1. One for rows that aren’t a “bonus row”
2. One for rows that have a “bonus row” after them

---

What I’ve tried and the problem:

However, I cannot work out how to use a selector to select “element that has a particular element after it” (i.e. a “previous” selector). As such, the best I can arrive at is:

1. Rows that aren’t a “bonus row”: $('tr:not(:has(.bonus))')
2. Rows that have a “bonus row” after them: $('tr + tr:has(.bonus)').prev()

This is all well and good, except whenever I use the live() method on a jQuery object that was obtained through traversal, rather than pure selection i.e.

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

I get this error:

uncaught exception: Syntax error,
unrecognized expression: )

---

The issue as an even more minimal example:

I was hoping this was localised to some script I am using, but I’ve isolated this to a minimal jsFiddle example which still replicates the issue for me: http://jsfiddle.net/ptvrA/

HTML:

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

JS:

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

It seems from this answer that this is a known limitation of live.

---

My workarounds

For reference, my workarounds are either:

1. Mark the rows that have a “bonus row” after them in some way
2. Bind the click to all rows, and do a check to see if there is a “bonus row” after them within the handler.

But if I can get a “nicer” solution, even out of curiosity in case I run into this problem in a different situation, I’d appreciate it.

Cheers

Answer 1

To be honest, I’d just use your second idea and bind click to all rows, then check to see if next row has a bonus td in it, like this:

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

fiddle located here: http://jsfiddle.net/7gdqc/2/

I don’t think there’s a pure selector way to do it, and this isn’t really a workaround – I’d call it a valid solution to your problem.