JQuery dynamische Elementselektoreinrichtung

Question

Ich weiß, diese Frage eine Menge beantwortet wurde, aber wenn ich diese Lösung angewendet Event binding on dynamically created elements? der Wähler wählt alle Elemente und nur das erste Element

$('body').on('click','a.delete',function() { 
    var id = $('a.delete').attr('id'); 
    var par = $('a.delete').closest('.foo'); 
    console.log(id); 
    par.hide(); 
    postDelete(id); 
}); 

.foo ist ein übergeordnetes Element von a.delete abgerufen
dieser Code blendet alle Elemente mit Klasse .foo und löschen Sie das erste Element mit Klasse a.delete nicht die klickte ein

Wie kann ich die ID des Elements ich klickte abrufen und seine Eltern verbergen?

Answer 1

Sie sollten this anstelle von a.delete in Click-Ereignis verwenden, um die Referenz von geklickt a.delete wie folgt zu erhalten.

$('body').on('click', 'a.delete', function() { 
    var id = $(this).attr('id'); //change here 
    var par = $(this).closest('.foo'); //change here 
    console.log(id); 
    par.hide(); 
    postDelete(id); 
}) 

Answer 2

Verwenden this das clicked Element zu erhalten.

Vom docs, Neben das Ereignisobjekt, die Event-Handling-Funktion hat auch Zugriff auf das DOM-Element, dass der Handler über das Schlüsselwort gebunden war this

$('body').on('click', 'a.delete', function() { 
    var id = $(this).attr('id'); 
    var par = $(this).closest('.foo'); 
    console.log(id); 
    par.hide(); 
    postDelete(id); 
});