AT-2016 AT-2016 - 4 months ago 10
Ajax Question

New Div Created WIth Ajax Call and Image/Link Click Gets Disabled

I've an image uploader in a project and uploading images with Ajax that works perfect. It shows uploaded images instantly without page refresh. Here is the code that I am using to upload images:

<script>
$(function () {
$('#btnUpload').click(function () {
var fileUpload = $("#FileUpload1").get(0);

var files = fileUpload.files;
var test = new FormData();
for (var i = 0; i < files.length; i++) {
test.append(files[i].name, files[i]);
}

$.ajax({
url: "../UI/Upload.ashx",
type: "POST",
contentType: false,
processData: false,
data: test,
success: function (result) {
alert(result);
//This section refreshes the div with uploaded images and shows images without full page refresh
$('#divImages').load(document.URL + ' #divImages');
},
error: function (err) {
alert(err.statusText);
}
});
});
});
</script>


<input type="file" id="FileUpload1" />
<input type="button" id="btnUpload" value="Upload Files" />

<div id="divImages" clientidmode="Static" runat="server">
<asp:Label ID="labelImages" ClientIDMode="Static" runat="server"></asp:Label>
</div>


The problem is after uploading images, the images are shown in the content but unable to click the images and a 'Delete' link is associated with every image that also seems to be blocked. Then when I refresh the full page, the click on the images and links works. I am not sure why it happens? In the inspect element of the browser, I can see newly div created inside like the below:

<div id="divImages"> //The newly created div after partial refresh with Ajax every time I upload image
<div id="divImages" clientidmode="Static" runat="server">
<asp:Label ID="labelImages" ClientIDMode="Static" runat="server"></asp:Label>
</div>
</div>


Does it prevent me to click on the images/buttons or anything else? Would be grateful if it is pointed out.

This is the code I am using for deleting images with links (Basically I am using the links as button):

$('#divImages A.deleteLink').click(function () { //Ajax used to delete images from '**Images**' folder with jQuery

var image = $(this).attr("img");
$.ajax({
type: "POST",
url: "../UI/DeleteImage.ashx",
data: "imageName=" + image,
contentType: 'application/x-www-form-urlencoded',
success: function (response) {
if (response == "true") {
$('#divImages A.imageLink[imgsrc*=\"' + image + '\"]').fadeOut();
$('#divImages A.deleteLink[img=\"' + image + '\"]').fadeOut();
}
},
error: function (response) {
alert('There was an error. ' + response);
}
});
});
});

Answer

The OP asked me to post this as an answer and I can't do anything about it.

See my explanation in the comments section

$('body').on('click', '#divImages a.deleteLink', function() {
Comments