0

我设置了一个测试页面，该页面从一个实际项目页面中剥离到足以证明我的问题。这是链接。

要了解我的意思，请转到链接并观察单击顶部表格的行如何切换显示该行的文本框和标签，交替显示。请注意单击“取消”按钮如何使两行都显示标签。

当您单击其行时，底部表格的行为相同。但是，当您单击底部表格中的“取消”按钮时，问题就会出现。页面实际上会刷新，而不是仅仅隐藏该行的文本框。

我已经在这上面花了几个小时，但我一辈子都无法弄清楚发生了什么，也不知道如何解决它。

如果有人可以看看这个并帮助我弄清楚发生了什么，我将非常感激。

4

2 回答 2

2

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

如果您正在考虑在单击保存时使用 ajax 进行更新的方法，您可以简单地使用基本按钮而不是输入按钮，而不必担心必须取消表单提交。

<button type="button">Save</button>

请注意该type="button"位很重要，否则它将像一个输入按钮并提交您的表单！

于 2013-02-01T02:07:24.230 回答
1

不确定您是否设法使其工作，但我在 jsfiddle 中尝试了 Spencerooni 的代码，但没有帮助。

但是，如果你用这个替换你的最后一点 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;
});

这是另一个 jsfiddle。

它在第一种情况而不是第二种情况下起作用的原因是第二个表被包装在form标签中，因此提交按钮POST在单击时会立即自动执行，而无需等待事件传播。因此，如果您想取消表单提交，您需要在事件的第一阶段捕获事件（而不是在它传播到 时table）。

于 2013-02-01T02:18:11.423 回答