How to bind an new event after an ajax success

97
February 05, 2022, at 1:20 PM

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>');
                        }
                    });
                });
Rent Charter Buses Company
READ ALSO
Why is this class in PHP working so weirdly with interface? [closed]

Why is this class in PHP working so weirdly with interface? [closed]

Want to improve this question? Add details and clarify the problem by editing this post

101
What is a Python Flask alternative to a JS &quot;onclick&quot; script?

What is a Python Flask alternative to a JS "onclick" script?

I want to make a Flask application for a puzzleUser should find some elements on a picture and click on them

105
React Native deep linking not working on React Navigation V6

React Native deep linking not working on React Navigation V6

When I configure my links and url-scheme with react navigation it falls into the fallback errorDon't know why

126
AdMob Android Banner Ads in component UI

AdMob Android Banner Ads in component UI

How to add AdMob Android Banner Ads in component UI

145