Ajax не получает php-пост из dymanically созданной формы

Question

Я создал ajax, который загружает изображение и загружает его на страницу.

Создает изображения с кнопкой X в верхнем углу, я пытаюсь получить их, чтобы при нажатии этой кнопки я запускал другой кусок кода php, удаляя правильное изображение и перезагружая изображения.

Я не могу получить свой ajax-код, чтобы получить код php, и я не уверен, почему.

Любой пункт был бы очень полезен.

Я обнаружил, что элементы, созданные диманом, не будут подняты, поэтому пришлось изменить код ajax на

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

так что я дошел до этой точки, но это все равно не подхватывает мой php-код, и я не знаю почему.

Любые указатели были бы очень полезны

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

Я ожидаю, что когда я нажму кнопку на изображении, он запустит файл advert_new_gun_delete_image.php без перезагрузки полной страницы

Answer 1

    $(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>');

Точно так же вы можете сделать динамический "targetLayer" со значением image_id, как я это делал с атрибутом id формы deleteform.

Answer 2

Вышеупомянутый ответ уже почти был, но мне пришлось изменить $('button.delete-button').on('click', function(){ на $("body").on("click", "#deleteimage", function(e){

И я тоже убрал: contentType: false, cache: false,processData:false,

Спасибо Гулам за толчок в правильном направлении

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

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

вместо

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