Question

我有一个表格，其中显示图片（除其他外）。我想删除显示的图片，使用“删除”按钮，该按钮将显示在图像旁边。单击按钮，图像将从我的数据库，之后图像将从表单中删除。

为了达到这个目的，我想在删除按钮上使用onclick函数，这将启动一个AJAX调用，这将从数据库中删除图像。然后我将继续从表单中删除图像（通过jquery .remove （））。

虽然我知道我必须做什么，但我的代码似乎没有用，因此我在stackoverflow上发帖。

错误：点击删除按钮时没有任何事情发生。

如果有人能够指出我哪里出错了，那真是有帮助。

谢谢！

我的代码：

主页：

    <?php
if(!isset($_SESSION))
{
    session_start();
}

if($_SESSION['auth']!=="yes")
{
    echo"You are not authorised to view this page. Please login <a href='login.php'>here</a>";
    exit();
}
?>

<!DOCTYPE HTML>
<html>
<head>
<!--Links to Css Page-->
<link type="text/css" rel="stylesheet" href="style.css">
<!--Loads JQuery script-->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<!--edits list of item categories on page load-->
<script type="text/javascript">
$(document).ready(function(){
    $("#edititemtable").hide();
    $("#edititemsubcat").hide();
    $("#edititemdetails").hide();
    $("#edititemcat").load("getcategory.php");

    $("#edititemcat").change(function(){
        var cat=$("#edititemcat").val();
        $("#edititemsubcat").show();
        $("#edititemsubcat").load('getsubcategory.php?cat='+cat);
    });

    $("#edititemsubcat").change(function(){
        var cat=$("#edititemcat").val();
        var subcat=$("#edititemsubcat").val();
        $("#edititemdetails").show();
        $("#edititemdetails").load('getitem.php?cat='+cat+'&subcat='+subcat);
    });

    $("#edititemsubmit").click(function(){
        var cat=$("#edititemcat").val();
        var subcat=$("#edititemsubcat").val();
        var item=$("#edititemdetails").val();
        $("#edititemtable").show();
        $("#edititemtable").append($("#details").load('changeitem.php?cat='+cat+'&subcat='+subcat+'&item='+item));

    });


    //Loads the Categories
    $('#changeitemcat').load("getcategory.php");
    //Loads the SubCategories
    $("#changeitemcat").change(function(){
        var cat=$("#changeitemcat").val();
        $("#changeitemsubcat").load('getsubcategory.php?cat='+cat);
    });
    //Deletes the existing pic via AJAX
    $("#changeitempicdel0").click(function(){
        alert("SUCCESS");
    });

});



</script>

</head>
<body style=" width:500px">
<form id="edititem" name="edititem" method="POST" action="getitem.php" >
    <table>
        <tr>
            <td>
                <select id="edititemcat" name="edititemcat"></select>
            </td>


            <td>
                <select id="edititemsubcat" name="edititemsubcat"></select>
            </td>



            <td>
                <select id="edititemdetails" name="edititemdetails"></select>
            </td>



            <td>
                <input type="button" id="edititemsubmit" name="edititemsubmit" value="Get Item" />
            </td>


</form>

<table id="edititemtable" border='1'>

<tr>
    <td colspan='2'>Item Info</td>
</tr>

<tr>
    <td>Select Category: </td>
    <td>
        <select id='changeitemcat' name='changeitemcat'></select>
    </td>
</tr>

<tr>
    <td>Select SubCategory: </td>
    <td>
        <select id='changeitemsubcat' name='changeitemsubcat'></select>
    </td>
</tr>

<tr>
    <td colspan="2" id="details" name="details">
    </td>
</tr>

</table>
</body>
</html>

表单页面的摘录（changeitem.php）

//NOTE:$imagecount is used to provide a unique id to each of the images loaded,     starting from index 0, increasing per loop.
//E.g changeitempicdel0,changeitempicdel1,changeitempicdel2, etc.
$imagecount=0;
WHILE($showpic=$getpic->fetch(PDO::FETCH_ASSOC))
{


echo"<div id='image'.$imagecount>";
        $image=$showpic['Path'];
        $imageid=$showpic['ImageName'];
        echo"<tr>";
            echo"<td>";
                echo"Image";
            echo"</td>";

            echo"<td>";

                echo"<input type='hidden' id='changeitempicchangeid'$imagecount value=$imageid />";
                echo"<input type='button' id='changeitempicchange'$imagecount value='Change Picture' />";

            echo"</td>";
        echo"</tr>";

        echo"<tr>";
            echo"<td></td>";
            echo"<td>";
                //Displays image
                echo"<img src=$image id='image'$imagecount width='250' height='250' alt=''>";
                //Passes image id, used for deletion
                echo"<input type='hidden' id='changeitempicdelid'$imagecount value=$imageid />";
                //Delete button
                echo"<input type='button' id='changeitempicdel$imagecount' value='Delete' />";

            echo"</td>";
        echo"</tr>";
        echo"</div>";
        $imagecount++ ;

    }

处理页面（deletepic.php）

    <?php
if(!isset($_SESSION))
{
session_start();
}

if($_SESSION['auth']!=="yes")
{
    echo"You are not authorised to view this page. Please login <a href='login.php'>here</a>";
    exit();
}
?>

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<?php

include("cxn.inc");
$picid=$_POST['pid'];
$picdel=$cxn->prepare("DELETE FROM `testdb`.`itempic` WHERE `PicID`=:picid ");
$picdel->bindValue(":picid",$picid);
$picdel->execute();

?>
</body>
</html>

Answer 1

你在click函数中硬编码了changeitempicdel0。您需要为每个元素添加单击事件。

例如，函数可以是：

$(".fooClass").click(function(){
        ...
    });

        echo"<input type='button' class="fooClass" id='changeitempicdel'$imagecount value='Delete' />";

在代码中还有许多其他可以改进的东西。 Sql注入就是其中之一。

Answer 2

使用类和委托事件：

$(document).on('click','.myclass',function(){
    alert("SUCCESS");
});

这里，它委托给文档级别，你应该使用删除按钮最近的静态容器元素。很难找到读取代码的元素......

PHP：

//Delete button
echo"<input class='myclass' type='button' id='changeitempicdel$imagecount' value='Delete' />";

Ajax删除无法正常工作

2 个答案: