Wie bekomme ich einen Zeilenindex in der dynamischen Tabelle über jQuery

Question

Ich benutze jquery, um dynamische Tabelleninhalte in der Seite zu erstellen, wie kann ich den Zeilennummernindex dieser dynamischen Geschichte bekommen? Im folgenden Code, wenn ich auf den Link "Zeige mehr" klicke, verwende ich die Indexfunktion im folgenden Code, aber es funktioniert jetzt. Wie kann ich dieses Problem lösen? Vielen Dank.

$.getJSON(JsonURL, 
     function(data){ 

      $.each(data, function(index, item){ 
       var obj = item; 
       books.push(book); 
      }); 
      for (var i = 0; i<obj.length; i++) { 
       var tr=$('<tr></tr>'); 
       $('<td>'+ obj[i].name +'</td>').appendTo(tr); 
       $('<td>'+ obj[i].category +'</td>').appendTo(tr); 
       $('<td><a class=\'showMore\' href=#>'+ 'show more' +'</a></td>').appendTo(tr); 
       tr.appendTo('#tableBody'); 
      }; 
    }); 
    $('a .showMore').on('click', function(event) { 
     var rowindex = $(this).parent().parent().children().index($(this).parent); 
     console.debug('rowindex', rowindex); 
    }); 

Answer 1

Sie benötigen event delegation für dynamisch erstellte Elemente zu verwenden:

Ereignis Delegation ermöglicht es uns, ein einzelnes Ereignis-Listener zu befestigen, an einem übergeordnetes Element, das für alle Kinder passend einen Selektor, feuert ob diese Kinder jetzt existieren oder in der Zukunft hinzugefügt werden.

$('body').on('click', 'a.showMore', function(event) { 
    var rowindex = $(this).closest('tr').index(); 
    console.debug('rowindex', rowindex); 
}); 

Bitte beachten Sie, dass Sie ein Leerzeichen zwischen a und .showmore nicht brauchen, weil a .showmore alle Elemente mit Klasse wählen wird showmore, die ein Kind eines Ankers ist.

Auch .parent() ist eine Methode, so dass Sie () nach parent benötigen, wenn Sie .parent() verwenden möchten.

Ein weiterer Vorschlag ist, dass anstelle mehr parent() Methode, Sie .closest()

Answer 2

Sie event delegation für die

$(document).on('click',".showMore", function(event) { 
    var rowindex = $(this).parents("tr").index(); 
    console.debug('rowindex', rowindex); 
}); 

Event-Delegation verwenden sollten können Sie ein einzelnes Ereignis-Listener befestigen, an ein übergeordnetes Element, das für alle Kinder passend einen Selektor ausgelöst wird, ob diese Kinder existieren jetzt oder werden in der Zukunft hinzugefügt.

Answer 3

Sie können mit versuchen können:

$(document).on('click', '.showMore', function(event) { 
    var rowindex = $(this).closest('tr').index(); 
    console.debug('rowindex', rowindex); 
});