我设置了一个测试页面，该页面从一个实际项目页面中剥离出来，足以证明我的问题。 Here's the link.
要了解我的意思，请转到链接并观察单击顶部表格的行如何切换显示该行的文本框和标签，交替显示。请注意单击“取消”按钮如何使两行都显示标签。
当您单击其行时，底部表格的行为相同。但是，当您单击底部表格中的“取消”按钮时，问题就会出现。页面实际上会刷新，而不是仅仅隐藏该行的文本框。
我已经为此花费了 HOURS，但我终其一生都无法弄清楚发生了什么，也不知道如何解决它。
如果有人可以看看这个并帮助我弄清楚发生了什么，我将非常感激。
【问题讨论】：
stopPropogation 区分大小写。您的第二个事件处理程序使用了错误的大小写（它以大写的 S 开头）。
// Prevent bubbling of click events in #tblBranchCoverage
$('#tblBranchCoverage').on('click', ':input', function (e) {
e.stopPropagation();
});
// Prevent bubbling of click events in #tblViewEditAllBranches
$('#tblViewEditAllBranches').on('click', ':input', function (e) {
e.StopPropagation();
});
但是，正如 niahar 所指出的，您的第二个表格在一个表格中，e.stopPropagation 还不够。您可以修改两个事件处理程序以简单地返回 false。在这种情况下，e.stopPropogation()、e.preventDefault() 和 return false 之间的差异可能值得 having a read。
如果您考虑在单击保存时使用 ajax 进行更新，您可以简单地使用基本按钮而不是输入按钮，而不必担心必须取消表单提交。
<button type="button">Save</button>
注意type="button" 位很重要，否则它会像输入按钮一样，然后提交您的表单！
【讨论】：
不确定您是否成功，但我尝试了Spencerooni's code in jsfiddle，但没有帮助。
但是，如果你用这个替换你的最后一点 js，那么它应该没问题：
$('tr input.cancelListEditBranch').click(function(e) {
// Show the labels and hide the edit elements
$(this).closest("tr").find('.edit').fadeOut(200);
$(this).closest("tr").find('.detailDisplay').delay(200).fadeIn(200);
return false;
});
这里是another jsfiddle。
它在第一种情况而不是第二种情况下起作用的原因是第二个表格被包裹在form标签中，所以提交按钮在点击时会立即自动执行POST，无需等待让事件传播。因此，如果您想取消表单提交，您需要在第一阶段捕获事件（而不是在它传播到 table 时）。
【讨论】：