MVC局部视图按钮onclick事件偶发不触发问题求助

我来帮你搞定这个按钮点击偶尔没反应的问题！核心原因其实是局部视图可能是动态加载/渲染的（比如通过AJAX、或者页面后续操作中添加的），而你原本用$(document).ready()直接绑定事件的方式，只能给页面初始化时就存在的元素绑定事件——后续动态生成的按钮根本没拿到事件绑定，所以会出现“偶尔失效”的情况。

解决方案：使用事件委托（Event Delegation） #

事件委托利用了DOM事件冒泡的特性，把事件绑定到一个页面初始化时就存在的静态父元素上（比如主视图里的固定容器，或者直接用document），这样不管局部视图什么时候被渲染出来，按钮的点击事件都能被触发。

结合你的代码，修改后的事件绑定脚本如下：

// 推荐绑定到更接近的静态父元素（比如主视图中包裹局部视图的容器），这里先用document示例
$(document)
  .off("click", ".btnDamageInvoiceGenerate") // 先解绑，避免重复渲染局部视图时多次绑定
  .on("click", ".btnDamageInvoiceGenerate", function (e) {
    var idSelector = function () { return this.id; };
    var selectedDamages = $(":checkbox:checked").map(idSelector).get();
    console.log(selectedDamages);
    console.log("idee");
    var baseUrl = '@Url.Action("GenerateInvoiceDamage", "TimberMonitor", new { Area = "" })';
    var url = baseUrl + '?' + $.param({ damageIds: selectedDamages }, true);
    location.href = url;
  });

$(document)
  .off("click", ".btnDamageInvoiceShow")
  .on("click", ".btnDamageInvoiceShow", function (e) {
    console.log("hello");
    var idSelector = function () { return this.id; };
    var selectedDamages = $(":checkbox:checked").map(idSelector).get();
    console.log(selectedDamages);
    var baseUrl = '@Url.Action("ShowDamageInvoice", "TimberMonitor", new { Area = "" })';
    var url = baseUrl + '?' + $.param({ damageIds: selectedDamages }, true);
    location.href = url;
  });

额外注意事项 #

1. 避免重复ID问题：如果这个局部视图会在页面中多次渲染，你当前按钮的固定ID（btnDamageInvoiceShow/btnDamageInvoiceGenerate）会导致页面出现多个相同ID的元素，这违反HTML规范，也会干扰选择器工作。建议直接去掉ID，只用类选择器（你已经定义了对应的类，完全够用）：

<div class="row viewEdit">
  <div class="button-bar col-md-2">
    <button type="button" class="btn btn-success btnDamageInvoiceShow">@Resources.Common.ShowInvoice</button>
  </div>
  <div class="button-bar col-md-2">
    <button type="button" class="btn btn-success btnDamageInvoiceGenerate">@Resources.Common.Generate</button>
  </div>
</div>

2. 脚本放置位置：把这段脚本放在局部视图里是没问题的（符合你“事件与局部视图绑定”的需求），加上.off()再.on()的操作，就能避免局部视图重复渲染时事件被多次绑定、点击一次触发多次的问题。

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