升级至jQuery 3.6后，动态加载jQuery对话框触发页面跳转问题

核心原因 #

升级jQuery到3.6版本后，<a>标签的默认跳转行为未被显式阻止，导致模态框短暂显示后，浏览器执行了链接的默认跳转逻辑（由于锚点#@item.ID不存在，最终跳转到站点根URL）。jQuery 3.x对事件处理的优先级和默认行为触发时机做了调整，旧版本中可能隐式规避了这个问题，但新版本需要显式声明阻止默认行为。

解决方案 #

在链接的点击事件处理函数中，添加event.preventDefault()来阻止浏览器的默认跳转行为：

修改后的脚本代码 #

$("#refunds tr[id]").each(function (index) {
    var id = this.id;

    $(this).children("td").children("a").click(function (event) {
        // 显式阻止链接的默认跳转行为
        event.preventDefault();
        
        $("#refundMethod").val(id);
        var url = '@Url.Action("DetailsRefund", new { id = "-1" })';
        url = url.replace("-1", id);

        $("#RefundBody").load(url, null, function () {
            $("#RefundDlgHeader").focus();
            $("#RefundDlg").modal('show');
        });
    });
});

额外优化建议 #

如果表格是动态加载的（比如通过AJAX渲染），建议使用事件委托方式绑定点击事件，避免因DOM动态更新导致事件绑定失效：

// 事件委托：绑定到静态父元素#refunds，监听动态生成的a标签点击
$("#refunds").on("click", "tr[id] td a", function (event) {
    event.preventDefault();
    var id = $(this).closest("tr").attr("id");
    
    $("#refundMethod").val(id);
    var url = '@Url.Action("DetailsRefund", new { id = "-1" })';
    url = url.replace("-1", id);

    $("#RefundBody").load(url, null, function () {
        $("#RefundDlgHeader").focus();
        $("#RefundDlg").modal('show');
    });
});

这种方式无需遍历表格行，直接将事件绑定到静态的父容器#refunds，无论表格内容如何动态更新，点击事件都会生效。

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