jQuery/AJAX可提交但无法从数据库删除数据求助

数据新增页面运行正常，但点击删除按钮无任何反应。尝试修改元素ID（包括使用随机字符串ID）仍无法解决，且浏览器控制台无报错信息。

HTML/PHP 代码片段 #

<div class="card mb-3">
    <div class="card-header">
        <div class="d-flex justify-content-between">
            <span>Notepad</span>
            <span><button class="no-style" id="deleteNotepad"><i class="fa-solid fa-x"></i></button></span>
        </div>
    </div>
    <div class="card-body text-center p-0">
        <input type="hidden" value="<?php echo $np['id'];?>" id="notepadId">
        <textarea class="form-control" id="notepad" rows="4"><?php echo $np['notepad']; ?></textarea>
    </div>
</div>

JS 代码 #

$("deleteNotepad").on("click", function () {
    var notepadId = $("#notepadId").val();
    $.ajax({
      type: "POST",
      url: "fetch/delete-notepad.php",
      data: {
        notepadId: notepadId,
      },
      success: function () {
        $("#notepads").load(location.href + " #notepads");
      },
    });
  });

PHP 处理代码 #

<?php 
require('../inc/functions.php');
$notepadId = $_POST['notepadId'];
mysqli_query($conn, "DELETE FROM notepads WHERE id = '$notepadId'");

问题修复要点 #

1. jQuery选择器错误
   绑定点击事件时，ID选择器缺少#符号，导致无法选中删除按钮。修正后的JS代码：

   $("#deleteNotepad").on("click", function () {
       var notepadId = $("#notepadId").val();
       $.ajax({
         type: "POST",
         url: "fetch/delete-notepad.php",
         data: {
           notepadId: notepadId,
         },
         success: function () {
           $("#notepads").load(location.href + " #notepads");
         },
         error: function(xhr, status, error) {
           console.error("AJAX请求错误:", error);
         }
       });
     });
   

   新增error回调，方便后续排查AJAX请求的潜在问题。

2. SQL注入风险修复
   原PHP代码直接拼接POST参数到SQL语句，存在严重安全风险，改用预处理语句：

   <?php 
   require('../inc/functions.php');
   if(isset($_POST['notepadId'])){
       $notepadId = $_POST['notepadId'];
       $stmt = mysqli_prepare($conn, "DELETE FROM notepads WHERE id = ?");
       mysqli_stmt_bind_param($stmt, "i", $notepadId);
       mysqli_stmt_execute($stmt);
       mysqli_stmt_close($stmt);
   }
   

   增加isset判断，避免未传参数时触发错误。

3. 动态元素绑定处理
   如果删除按钮是AJAX动态生成的，需使用事件委托确保新元素能触发事件：

   $(document).on("click", "#deleteNotepad", function () {
       // 后续逻辑不变
   });
   

内容的提问来源于stack exchange，提问作者Jordan Thompson