Ajax没有从动态创建的表单中获取php帖子

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

$(document).delegate('#deleteform button', 'click', function (e) {

instead of

$("body").on("click", "#deleteform button", function(e){

    $(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.

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);
                        }
                    });
                });
            });