Das Hinzufügen neu erstellten Element Ereignishandler

Question

Ich versuche, mit Link auf geordnete Liste neues Element hinzuzufügen, um es Entfernung ist:

$('#list ol').append('<li>' + label + ' <a href="#remove_'+id+'">[remove]</a></li>'); 

aber das funktioniert nicht:

$('a[href^="#remove"]').on('click', function(event){ 
    alert('Removing: '+$(this).attr('href').substr(8)); 
    event.preventDefault(); 
}); 

Jede Idee, warum ?

Answer 1

Fügen Sie das neue Element in jQuery-Tags ein und wenden Sie den Ereignishandler zu diesem Zeitpunkt an. Dies ist ein sauberer und effizienter Ansatz als etwas kompliziert jQuery Selektoren mit der Event-Handler zuweisen, nachdem das Element bereits in das DOM eingefügt wurde:

//this line will create your element in memory, but not insert it to the DOM 
var newElmt = $('<li>' + label + ' <a href="#remove_'+id+'">[remove]</a></li>'); 

//you can apply jQuery style event handlers at this point 
newElmt.on('click',function(e) { 

    alert('Removing: '+$(this).attr('href').substr(8)); 
    event.preventDefault(); 
}); 

//insert the element as you were before 
$('#list ol').append(newElmt); 

Answer 2

$('#list').on('click', 'a[href^="#remove"]', function(event){ 
    alert('Removing: '+$(this).attr('href').substr(8)); 
    event.preventDefault(); 
}); 

Wie Sie die li dynamisch sind anhängen, so Sie benötigen die Delegate-Ereignisbehandlung unter Verwendung von .on() als Delegate-Handler.