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

类似地，您可以使用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向正确的方向推进

  $(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){

Ajax无法从动态创建的表单中获取PHP帖子

3 个答案: