jQuery nicht auslösende Spanne Klicken Sie auf angehängt Element

Question

Ich habe eine Bedingung innerhalb meiner Js-Datei, wo ein Dateiupload mein jQuery das folgende Element für jeden zurückgegebenen Wert anhängen, aber ich habe Probleme mit meinem Klick-Trigger auf das delete span-Tag zugeordnet mit dem Link. Ich sehe, dass der Hash in der URL angezeigt wird, was auf einen Klick auf das Element hinweist, aber mein console.log zündet nicht und zeigt mir an, dass etwas aus ist.

Hier ist mein post-Bild hochladen jQuery:

$("#file-input").on('change', function(){ 
     var files = $(this).get(0).files; 

     if (files.length > 0){ 
      var formData = new FormData(); 

      for(var i = 0; i < files.length; i++){ 
       var file = files[i]; 
       console.log(files[i]); 
       formData.append('fileUpload', file, file.name); 
      } 

      $.ajax({ 
       url: '/app/sign', 
       type: 'POST', 
       data: formData, 
       processData: false, 
       contentType: false, 
       success: function(data){ 
        for(var i = 0; i < data.length; i++){ 
         console.log('This is the element ' + data[i]); 
         $('.file-preview').append("<a href='" + data[i] + "'>" + data[i] + "</a><a href='#' class='remove-file' data-file-link='" + data[i] + "'><span class='glyphicon glyphicon-remove'></a><br>"); 
        } 
       }, 
       error: function(error){ 
        console.log('error ' + JSON.stringify(error)); 
       } 
      }); 
     } 
     if (files.length > 5){ 
      alert('You can only upload a maximum of five files at this time'); 
      return false; 
     } 
    }); 

Mit einem Schwerpunkt auf der HTML angehängt:

$('.file-preview').append("<a href='" + data[i] + "'>" + data[i] + "</a><a href='#' class='remove-file' data-file-link='" + data[i] + "'><span class='glyphicon glyphicon-remove'></a><br>"); 

Auf .remove-file klicken, da sehe ich nicht die console.log oder alert:

$('.remove-file').on('click', function(){ 
    console.log('Delete Triggered'); 
    var fileLink = $(this).data('file-link'); 
    alert(fileLink); 
    /*alert($(this).attr('href')); 
    $.ajax({ 
     url: '/app/sign', 
     type: 'DELETE', 
     data: fileLink, 
     success: function(){ 
      $('.file-preview').remove(); 
     }, 
     error: function(error){ 
      console.log('error ' + JSON.stringify(error)); 
     } 
    })*/ 
}); 

Answer 1

$(document).on('click','.remove-file', function(){ 

Try This