Question

我设置了一个测试页面，该页面从实际项目页面剥离到足以证明我的问题。 Here's the link

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

单击其行时，底部表的行为相同。但是，当您单击底部表格中的“取消”按钮时，问题就会出现问题。

，该页面不是仅隐藏该行的文本框，而是隐藏该行的文本框

我已经花了 HOURS 来解决这个问题，我不能为我的生活找出正在发生的事情，也不知道如何修复它。

如果有人可以看看这个并帮我弄清楚发生了什么，我真的很感激。

Answer 1

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"位很重要，否则它会像输入按钮一样，并提交表单！

Answer 2

不确定您是否设法使其正常运行，但我尝试了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时）。

无法弄清楚为什么jQuery行切换在一个表上工作，而不是另一个表

2 个答案: