I have a form to upload a profile icon image. Once the upload is complete on AJAX success, I grab the new image path and display the image. It works fine, however, if I used the script several times without refreshing the page, the new returned image flashes several times after its dynamically loaded. (See gif animation).

This repeat ‘flashing’ of the returned image seems to increase if I continue to used the script without a page refresh. So, I am guessing I’m doing something wrong here. Missing something to prevent the event from continuing to fire? Also, If I do encounter an error, the error alert also fires/repeats many times.

$('#image_icon').change(function() { 
    $('#icon_upload_form').submit();
});

$('#icon_upload_form').on('submit',(function(e) {
        
        var icon_loader = $(".icon_loader").show();
        
        e.preventDefault();
        e.stopPropagation();
    
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: '../process/process_icon_upload.php',
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            dataType   : "json",
            success:function(data){

                icon_loader.hide();

                if (data.error > 0) {
                    
                    alert(data.msg)
                    
                } else if (data.error == 0) {
                    $("#save_map_icon").fadeIn("fast");
                    $("#new_map_icon").css({"background-image":"url('../images_icons_tmp/"+data.filename+"')"})
                }
                
                return false;
                
            },
            error: function(data){
                alert("Error - "+JSON.stringify(data))
                console.log("error");
                console.log(data);
                return false;
            }
        });
    
    })
)