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

Question

我创建了一些 ajax 上传图像并将其加载到页面中。

它会在顶角创建一个带有 X 按钮的图像，我正在尝试获取它，因此当单击此按钮时，我会运行另一段 php 代码，将删除正确的图像并重新加载图像。

我无法让我的 ajax 代码来获取 php 代码，我不知道为什么。

任何指出都会非常有帮助。

我发现 dymanically 创建的 elemets 不会被拾取所以不得不将我的 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);

                }

            });

        });

    });

Answer 1

&nbsp; &nbsp;$(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; $('button.delete-button').on('click', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var image_id = parseInt($(this).parent().attr('id').replace('deleteform', ''));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(image_id); // You can comment out this. Used for debugging.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "include_advert/advert_new_gun_delete_image.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data:&nbsp; {image_id: image_id},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentType: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; processData:false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#targetLayer"+image_id).html(data); // targetLayer is dynamic and is different for each record&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function(xhr, status, error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(xhr.responseText);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });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) {&nbsp; &nbsp; echo ( '<div class="image-area" >&nbsp; &nbsp; <form&nbsp; id="deleteform'.$getadvertimages_row['image_id'].'" method = "POST" action ="include_advert/advert_new_gun_delete_image.php" >&nbsp; &nbsp; <img src="'. $getadvertimages_row['image_src'] . '"&nbsp; alt="Preview">&nbsp; &nbsp; <button type="button" name="deleteimage" value="" class="remove-image delete-button" style="display: inline;" >X</button>&nbsp; &nbsp; </form>&nbsp; &nbsp; </div>');}echo ('</div>');同样，您可以使用 image_id 值使“targetLayer”动态化，就像我使用表单的属性 id deleteform 所做的那样。

Answer 2

上面的答案几乎就在那里，但我不得不将其更改 $('button.delete-button').on('click', function(){为$("body").on("click", "#deleteimage", function(e){我还删除了：contentType: false, cache: false,processData:false,感谢 Ghulam 朝着正确的方向努力&nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("body").on("click", "#deleteimage", function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var image_id = parseInt($(this).parent().attr('id').replace('deleteform', ''));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(image_id); // You can comment out this. Used for debugging.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "include_advert/advert_new_gun_delete_image.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data:&nbsp; {image_id: image_id },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#imageareadiv').hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#targetLayer").html(data); // targetLayer is dynamic and is different for each record&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function(xhr, status, error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(xhr.responseText);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });

Answer 3

$(document).delegate('#deleteform&nbsp;button',&nbsp;'click',&nbsp;function&nbsp;(e)&nbsp;{代替$("body").on("click",&nbsp;"#deleteform&nbsp;button",&nbsp;function(e){