HTML a标签点击异常：点击编辑按钮触发删除操作问题排查

问题根源 #

编辑按钮触发删除操作的核心原因有两点：

• <button> 标签默认类型为submit，如果未显式指定type="button"，它会被当作表单提交按钮处理
• 编辑按钮被嵌套在删除操作的<form>标签内部，点击时会直接提交这个删除表单，触发删除逻辑

修复方案 #

有两种简单的修复方式：

方案1：给编辑按钮添加type="button"属性

明确指定按钮类型为普通按钮，避免触发表单提交：

<a href="<?= base_url("category/edit/$row->categoryid") ?>">
    <button class="btn btn-sm" type="button">
        <i class="fas fa-edit text-info"></i>
    </button>
</a>

方案2：将编辑按钮移出删除表单范围

把编辑按钮的<a>标签放到删除表单的外部，脱离表单管辖：

<td>
    <!-- 编辑按钮移到表单外 -->
    <a href="<?= base_url("category/edit/$row->categoryid") ?>">
        <button class="btn btn-sm">
            <i class="fas fa-edit text-info"></i>
        </button>
    </a>
    <?= form_open("category/delete/$row->categoryid", ['method' => 'POST']) ?>
    <?= form_hidden('categoryid', $row->categoryid) ?>
    <button class="btn btn-sm"
            type="submit"
            onclick="return confirm('Are you sure?')">
        <i class="fas fa-trash text-danger"></i>
    </button>
    <?= form_close() ?>
</td>

额外优化建议 #

编辑操作本质是页面跳转，完全可以去掉多余的<button>标签，直接用<a>包裹图标并添加按钮样式，更简洁且无表单提交风险：

<a href="<?= base_url("category/edit/$row->categoryid") ?>" class="btn btn-sm">
    <i class="fas fa-edit text-info"></i>
</a>

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