.find nicht auf td arbeitet nach DOM

Question

geladen Also, ich habe diese Tabelle:

<div id="notes" class="col-xs-12 col-sm-4 col-sm-offset-2"> 
       <div class="panel panel-default"> 
        <table class="table table-bordered" id="note-table"> 
        </table> 
       </div> 
      </div> 

... und ich lade Tabellenelemente nach dem DOM geladen ist; so dass die Tabelle sieht wie folgt aus:

<div id="notes" class="col-xs-12 col-sm-4 col-sm-offset-2"> 
        <div class="panel panel-default"> 
         <table class="table table-bordered" id="note-table"> 
          <tr><td>This is a test</td></tr> 
         </table> 
        </div> 
       </div> 

Mein jQuery-Code ist das, aber es funktioniert nicht.

$('#note-table').on("click", "td", function(){ 
     var row = $(this).find('td:first').addClass("success"); 
}); 

(der Erfolg Klasse ist eine Bootstrap-Klasse, FYI)

Die var row = Linie war, dass ich aus einem anderen Teil meines Codes umgewidmet, die gut funktioniert. Es funktioniert jedoch hier nicht.

Answer 1

Sie klicken auf die Tabellenzelle: So .find() wird eine Tabellenzelle nicht finden. Diese .on("click", "td", function() delegiert den Klick an die Tabellenzelle (td). http://api.jquery.com/on/$(this) ist td.

Sie würden wollen, um so etwas zu tun:

if($(this).is(':first-child')) { 
     $(this).addClass("success"); 
} 

Beispiel:

https://jsfiddle.net/kxonfppz/8/