MVC应用局部视图按钮onclick事件异常，点击逻辑无法执行

看起来你遇到了局部视图里submit按钮JS事件不工作的情况，我来帮你梳理下常见的问题和解决办法：

1. 先阻止表单默认提交行为 #

你的按钮是type="submit"，点击后会自动触发表单提交，页面会刷新，导致你的JS逻辑还没执行完就跳转了。这是最常见的原因！

针对第一个按钮（带onclick的） #

修改你的test()函数，加上阻止默认行为的代码，同时在onclick里传递event参数：

<button type="submit" id="btnSilviPrioInvoiceShow" class="btn btn-success" onclick="test(event)">@Resources.Common.ShowInvoice</button>

function test(event) {
    // 阻止表单默认提交
    event.preventDefault();
    
    // 这里写你的业务逻辑
    console.log("显示发票按钮被触发");
    // 比如发送AJAX请求获取发票数据，更新页面等
}

针对第二个按钮（通过类绑定的） #

不管你用哪种方式绑定事件，都要先阻止默认提交：

// 推荐用事件委托（尤其适合局部视图动态加载的情况）
document.addEventListener('click', function(event) {
    // 判断点击的元素是目标按钮
    if (event.target.classList.contains('btnSilviPrioInvoiceGenerate')) {
        event.preventDefault();
        // 你的生成逻辑
        console.log("生成发票按钮被触发");
        // 比如调用后端接口生成发票，处理返回结果
    }
});

2. 处理动态加载的局部视图元素 #

如果你的局部视图是通过AJAX、PartialView异步加载到页面的，直接用getElementById或querySelector绑定事件会失效——因为绑定事件的时候元素还没出现在DOM里。

这时候事件委托是最佳方案：把事件绑定到一个始终存在的父元素（比如页面的form标签、或者document）上，通过判断点击目标来执行逻辑，上面的代码已经用到了这种方式。

如果你想绑定到更靠近的父元素（比document更高效），可以找到局部视图所在的容器，比如：

const container = document.getElementById("your-partial-view-container");
container.addEventListener('click', function(event) {
    if (event.target.classList.contains('btnSilviPrioInvoiceGenerate')) {
        event.preventDefault();
        // 业务逻辑
    }
});

3. 确保JS代码在DOM渲染完成后执行 #

如果你的JS代码写在页面头部，或者在局部视图加载之前就执行了，会找不到元素。解决办法：

• 把JS代码放到页面底部（</body>之前）
• 或者包裹在DOM加载完成的事件里：

document.addEventListener('DOMContentLoaded', function() {
    // 这里写你的事件绑定代码
    const showBtn = document.getElementById("btnSilviPrioInvoiceShow");
    if (showBtn) {
        showBtn.addEventListener('click', function(event) {
            event.preventDefault();
            test(event); // 或者直接写逻辑
        });
    }
});

最后检查：打开浏览器控制台排查错误 #

按F12打开开发者工具，切换到Console标签，看看有没有报错：比如test is not defined（函数未定义）、Cannot read property 'addEventListener' of null（找不到元素），这些都会直接导致事件失效。

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