Geek Answers Handbook

JQuery Traversing + Live Event Handlers

I'm having trouble binding event handlers to specific strings.

What I have and what I need:

I have HTML that will be dynamically generated after the page loads as follows:

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

I would like to have two events click:

  • One for lines that are not a "bonus line"
  • One for lines that have a “bonus line” after them

What I tried and the problem:

However, I cannot decide how to use the selector to select the “element that has a specific element after it” (ie the “previous” selector). That way I can achieve the best:

  • Lines that are not a "bonus line": $('tr:not(:has(.bonus))')
  • Lines that have a “bonus row” after them: $('tr + tr:has(.bonus)').prev()

, , live() jQuery, , i.e.

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

:

: , :)

:

, script, , jsFiddle, : http://jsfiddle.net/ptvrA/

HTML:

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

JS:

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

, , live.

:

  • , " "
  • click , , " " .

"" , , , .

+5
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/

, , , - .

+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').

+2

More articles: