I’m uploading different images sending the form with ajax, and if the image is uploaded successfully, the button to launch the modal to upload the images changes the data-target attribute to launch a different modal to delete the images and vice versa, but after the image is uploaded and the text in the button changes as well as the data-target attribute (I can see it in the browser inspector that it changed), it is not working (I guess it has to do with the dom, because the form that is bound with the event is the form that uploads the image, not the one that deletes it. How can I do that? Any help will be appreciated. Thanks
$('body').on('submit','form[id="image-form"]', function(e) {
e.preventDefault();
$("#upmsg").html('<div class="alert alert-info"><i class="fa fa-spin fa-spinner"></i> Please wait...!</div>');
$.ajax({
type: "POST",
url: "dir_programs_img_upload.php",
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData: false, // To send DOMDocument or non processed data file it is set to false
dataType:"json",
success: function(data) {
if (data.status == 1 || parseInt(data.status) == 1) {
if (data.target == "thumb") {
$("#img-thumb").attr("src","../img/prog_thumbs/" + data.name);
$("#action-thumb").attr("data-target", "mod-img-del");
$("#action-thumb").html("Remove Image");
} else if (data.target == "slide1") {
$("#img-slide1").attr("src","../img/prog_carousel/" + data.name);
$("#action-slide1").attr("data-target", "mod-img-del");
$("#action-slide1").html("Remove Image");
} else if (data.target == "slide2") {
$("#img-slide2").attr("src","../img/prog_carousel/" + data.name);
$("#action-slide2").attr("data-target", "mod-img-del");
$("#action-slide2").html("Remove Image");
} else if (data.target == "slide3") {
$("#img-slide3").attr("src","../img/prog_carousel/" + data.name);
$("#action-slide3").attr("data-target", "mod-img-del");
$("#action-slide3").html("Remove Image");
} else if (data.target == "slide4") {
$("#img-slide4").attr("src","../img/prog_carousel/" + data.name);
$("#action-slide4").attr("data-target", "mod-img-del");
$("#action-slide4").html("Remove Image");
} else if (data.target == "map") {
$("#img-map").attr("src","../img/prog_maps/" + data.name);
$("#action-map").attr("data-target", "mod-img-del");
$("#action-map").html("Remove Image");
}
$("#upmsg").html("");
$('#image-form')[0].reset();
$("#preview").attr("src","img/img12.jpg");
$('#mod-upload').modal('hide');
} else {
$("#upmsg").html('<div class="alert alert-info"><i class="fa fa-exclamation-triangle"></i> ' + data.msg + '</div>');
}
},
error: function(data) {
$("#upmsg").html('<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> There is some thing wrong.</div>');
}
});
});