I have a condition within my js file where a file upload triggers my jQuery to append the following element for each returned value, but I am having trouble my click trigger on the delete span tag associated with the link. I am seeing the hash appear in the url indicating a click on the element, but my console.log does not fire, indicating to me that something is off.
Here is my post-image upload 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;
}
});
With an emphasis on the appended HTML:
$('.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>");
On .remove-file click, I'm not seeing the console.log or 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));
}
})*/
});
