Ajax not picking up php post from dymanically created form - php

Question

I have created some ajax that uploads an image and loads it into the page.
It creates an images with an X button on the top corner, I am trying to get it so when this button is clicked I then run another peice of php code with will delete the correct image and reload the images.
I cant get my ajax code to pick up the php code and I am not sure why.
Any pointed would be very helpful.
I have found out that dymanically created elemets will not be picked up so had to change my ajax code to
$("body").on("click", "#deleteform button", function(e){
so I am hitting this point but but it sill is not picking up my php code and I dont know why.
Any pointers would be very helpful
AJAX JS:
$(document).ready(function(){
$("#uploadForm").on('submit',function(e) {
e.preventDefault();
$.ajax({
url: "include_advert/advert_new_gun_add_image.inc.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
},
error: function()
{
}
});
});
});
$(document).ready(function(){
$('button.deleteimage').on('click', function(){
var image_id = parseInt($(this).parent().attr('id').replace('deleteform', ''));
console.log(image_id); // You can comment out this. Used for debugging.
e.preventDefault();
$.ajax({
url: "include_advert/advert_new_gun_delete_image.php",
type: "POST",
data: {image_id: image_id},
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer"+image_id).html(data); // targetLayer is dynamic and is different for each record
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
});
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="include_advert/advert_js/advert_gun_load_save_images.js"></script>
<div class="bgColor">
<form id="uploadForm" action="include_advert/advert_new_gun_add_image.inc.php" method="post" class="login-form" enctype="multipart/form-data">
<div id="targetLayer" class=col> </div>
<div id="uploadFormLayer">
<input name="file" type="file" class="inputFile" /><br/>
<div class="text-center">
<input type="submit" name="submit" value="UPLOAD" class="btn btn-common log-btn">
</div>
</form>
advert_new_gun_add_image.inc.php:
<?php
$imagecount = 0;
echo ('<div class=row sm>');
foreach ($getadvertimages as $getadvertimages_row) {
echo ( '<div class="image-area" >
<form id="deleteform'.$getadvertimages_row['image_id'].'" method = "POST" action ="include_advert/advert_new_gun_delete_image.php" >
<img src="'. $getadvertimages_row['image_src'] . '" alt="Preview">
<button onclick = "" name="deleteimage" id="deleteimage" value="'. $getadvertimages_row['image_id'] . '" class="remove-image" style="display: inline;" >X</button>
</form>
</div>');
}
echo ('</div>');
advert_new_gun_delete_image.php:
<?php
if (isset($_POST['deleteimage']) ){
echo('hello');
}?>
I am expecting when I click the button on the image it will run the advert_new_gun_delete_image.php file without reloading the complete page

Answer 1

The Above Answer was almost there but I had to change the $('button.delete-button').on('click', function(){ to $("body").on("click", "#deleteimage", function(e){
And I also removed:contentType: false, cache: false,processData:false,
Thanks Ghulam for the push in the right direction
$(document).ready(function(){
$("body").on("click", "#deleteimage", function(e){
var image_id = parseInt($(this).parent().attr('id').replace('deleteform', ''));
console.log(image_id); // You can comment out this. Used for debugging.
e.preventDefault();
$.ajax({
url: "include_advert/advert_new_gun_delete_image.php",
type: "POST",
data: {image_id: image_id },
success: function(data)
{
$('#imageareadiv').hide();
$("#targetLayer").html(data); // targetLayer is dynamic and is different for each record
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
});
});

Answer 2

$(document).ready(function(){
$('button.delete-button').on('click', function(){
var image_id = parseInt($(this).parent().attr('id').replace('deleteform', ''));
console.log(image_id); // You can comment out this. Used for debugging.
e.preventDefault();
$.ajax({
url: "include_advert/advert_new_gun_delete_image.php",
type: "POST",
data: {image_id: image_id},
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer"+image_id).html(data); // targetLayer is dynamic and is different for each record
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
});
});
include 'advert_new_gun_save_image_script.inc.php';
include 'advert_new_dropdown_populate/advert_new_gun_image_populate.php';
$imagecount = 0;
echo ('<div class=row sm>');
foreach ($getadvertimages as $getadvertimages_row) {
echo ( '<div class="image-area" >
<form id="deleteform'.$getadvertimages_row['image_id'].'" method = "POST" action ="include_advert/advert_new_gun_delete_image.php" >
<img src="'. $getadvertimages_row['image_src'] . '" alt="Preview">
<button type="button" name="deleteimage" value="" class="remove-image delete-button" style="display: inline;" >X</button>
</form>
</div>');
}
echo ('</div>');
Similarly you can make "targetLayer" dynamic with image_id value just like I did with form's attribute id deleteform.

Answer 3

$(document).delegate('#deleteform button', 'click', function (e) {
instead of
$("body").on("click", "#deleteform button", function(e){