Mysql PHP生成的编辑按钮只工作一次

Question

我正在使用 php sql html css jquery 开发一个类似于记事本或待办事项列表的 Web 应用程序

查询在索引页面获取列表并显示它，并在显示它时添加一个带有“编辑”类的按钮。

当他们按下编辑时，编辑工作，但在提交后只有一次。

在提交按钮时，使用 jQuery 启动一个 ajax 调用到另一个 PHP 文件，该文件编辑数据并再次显示数据库中的所有项目。

还有一个“添加项目”按钮，用于添加新项目。提交时添加一个新项目，并再次从数据库中获取所有内容并显示它（也是 ajax）。

该错误是提交新项目后或编辑后，编辑按钮停止工作

请检查下面的sn-p——sn-p 1 是jquery，sn-p 2 是要在ajax 调用上运行的文件，sn-p 3 是索引php 文件：

    $("#submit").click(function(){
        
        textarea = $("#textarea").val();
        date = $("#date").val();
        
        if(textarea == "" || date == ""){
            $("#message").html("<span class='error'>Make sure you didn't leave anything empty");
        }
        else{
            $("#message").html("");
            submitItem();
            $("#contentCont").fadeOut(200);
        }
    });
    
    $(".edit").click(function(){
        i = "edit";
        itemID = $(this).attr("name");
        var dateValue = $("#date"+itemID).text();
        var statusValue = $("#status"+itemID).attr("name");
        var textboxValue = $("#textbox"+itemID).text();
        var categoryValue = $("#category"+itemID).text().toLowerCase();
        $("#contentCont").fadeIn(200);
        $("#textarea").val(textboxValue);
        $("#date").val(dateValue);
        $("#categories").val(categoryValue).prop("selected",true);
        $("#status").val(statusValue).prop("selected",true);
    });
    function submitItem(){
        textarea = $("#textarea").val();
        status = $("#status").val();
        category = $("#categories").val();
        date = $("#date").val();
            
        var ajaxReq = new XMLHttpRequest();
        ajaxReq.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("todoCont").innerHTML = this.responseText;
            }
        }
        ajaxReq.open("POST","../php/addItem.php",true);
        ajaxReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajaxReq.send("textarea="+textarea+"&category="+category+"&status="+status+"&date="+date+"&itemID="+itemID+"&i="+i);
    }

<?php
session_start();
require("server.php");
$cnx = new mysqli($server_name,$server_username,$server_password,$db);

$category = validate($_POST["category"]);
$item = $_POST["textarea"];
$date = $_POST["date"];
$status = validate($_POST["status"]);
$userID = $_SESSION["userID"];
$itemID = $_POST["itemID"];
$i = $_POST["i"];


$searchForCategoryID = "SELECT * FROM categories where userID='$userID' AND categoryname = '$category'";

$result = $cnx->query($searchForCategoryID);
$row = $result->fetch_assoc();
$categoryID = $row["CategoryID"];
if ($i === "new"){
    $addItem = "INSERT INTO Items(userID,ItemValue,DueDate,CategoryID,Status) VALUES ($userID, '$item' , '$date' , $categoryID,'$status')";
    $cnx->query($addItem);
}

else if ($i === "edit"){
    $editItem = "UPDATE Items SET ItemValue='$item' , DueDate='$date' , CategoryID = $categoryID,Status='$status' WHERE itemID = $itemID " ;
    $cnx->query($editItem);
}

$getTableRows = "SELECT * FROM Items WHERE userID = $userID ORDER BY DueDate";
$result = $cnx->query($getTableRows);

if($cnx->error){
    echo "Could not get your stuff";
}

if($result->num_rows > 0){
    while ($rows = $result->fetch_assoc()){
        $getCategory = "SELECT CategoryName FROM Categories WHERE CategoryID = " . $rows["CategoryID"] . ";";
        $result2 = $cnx->query($getCategory);
        $rows2 = $result2->fetch_assoc();
        if ($rows["Status"] == "ongoing"){
            $status = "ongoing";
        }else
        if ($rows["Status"] == "overdue"){
            $status = "overdue";
        }else
        if ($rows["Status"] == "done"){
            $status = "done";
        }
        echo '  <div class="box-container">
                    <div class="right">
                      <div class="textbox">
                        <span id="textbox'.$rows["itemID"].'">'. $rows["ItemValue"] .'</span>
                      </div>
                      <div class="footer">
                        <div class="status '. $status .'" id="status'.$rows["itemID"].'" name="'.$status.'"></div>
                        <span class="date" id="date'.$rows["itemID"].'">'.$rows["DueDate"].'</span>
                        <span class="category" id="category'.$rows["itemID"].'">'.ucfirst($rows2["CategoryName"]).'</span>
                        <button type="button" name="'. $rows["itemID"] .'" class="btn btn-info edit">Edit</button>
                      </div>
 
                    </div>
                </div>';
    }
}
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php session_start();?>
<?php
include("server.php");
$cnx = new mysqli($server_name,$server_username,$server_password,$db);
$userID = $_SESSION["userID"];

<!--This is how the info is shown and the EDIT button is made-->
 echo '  <div class="box-container">
                    <div class="right">
                      <div class="textbox">
                        <span id="textbox'.$rows["itemID"].'">'. $rows["ItemValue"] .'</span>
                      </div>
                      <div class="footer">
                        <div class="status '. $status .'" id="status'.$rows["itemID"].'" name="'.$status.'"></div>
                        <span class="date" id="date'.$rows["itemID"].'">'.$rows["DueDate"].'</span>
                        <span class="category" id="category'.$rows["itemID"].'">'.ucfirst($rows2["CategoryName"]).'</span>
                        <button type="button" name="'. $rows["itemID"] .'" class="btn btn-info edit">Edit</button>
                      </div>
 
                    </div>
                </div>';
    }
?>

Answer 1

您需要在全球范围内注册您的活动：

$("body").on("click", "#submit", function(){
});

和

$("body").on("click", ".edit", function(){
});

Answer 2

您需要委托，因为元素是动态创建的。

更改以下行：

$(".edit").click(function(){

到：

$(".edit").on('click', function(){

这同样适用于

$("#submit").click(function(){

到

$("#submit").on('click', function(){