点击删除按钮时未显示确认提示框，请问以下代码存在什么问题？

原JS函数： #

$("#delCat").click(function(){ //alert("test"); if(confirm('Are you sure want to delete this category ?')){ return true; } else { return false } });

原删除按钮代码： #

<a id="delCat" href="delete-category/{{ $category->id }}" class="btn btn-danger btn-mini">Delete</a>

让我帮你拆解下问题，以及对应的修复方案：

首先，导致确认框不出现的核心原因有两个：

1. 事件绑定时机错误：如果你的JS代码在页面DOM元素还没加载完成时就执行了，$("#delCat")根本找不到这个按钮元素，事件绑定直接失败，自然不会触发任何点击逻辑。
2. 未有效阻止默认跳转：就算事件绑定成功，当用户点击取消时，仅return false的写法在部分浏览器里可能无法阻止a标签的默认跳转行为——页面会直接跳转，你根本来不及看到确认框。

修正后的代码： #

先把JS代码放到DOM加载完成的回调中，确保能正确找到元素，同时显式阻止默认行为：

$(document).ready(function() {
  $("#delCat").click(function(e) {
    // 弹出确认框（顺便修正了原文本的语法小问题）
    const isConfirmed = confirm('Are you sure you want to delete this category?');
    
    if (isConfirmed) {
      // 用户确认，允许执行a标签的默认跳转
      return true;
    } else {
      // 用户取消，显式阻止跳转行为
      e.preventDefault();
      return false;
    }
  });
});

另外还有两个小细节需要注意：

• 如果页面上有多个删除按钮，不能用同一个id，得换成class（比如class="delCat"），然后用类选择器$(".delCat").click(...)绑定事件，不然只会给第一个匹配的按钮绑定逻辑。
• 可以先取消原代码里的alert("test")注释，测试下事件是否能正常触发，排查是不是绑定时机的问题。

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