jQuery绑定的表单输入事件提交后失效，保存按钮无法触发闪烁如何解决？

问题原因 #

你的问题是DOM节点重载后原绑定事件丢失导致的：

你在document.ready阶段直接给<form id="ApprovalForm"节点绑定了input事件，表单提交后partial view刷新会直接替换掉原来的表单DOM节点，新渲染出来的表单没有绑定过输入监听事件，自然无法触发保存按钮闪烁逻辑。

解决方案 #

将直接绑定改为事件委托绑定，把监听事件绑到不会被partial view刷新替换的上层固定节点上（比如document，或者你页面里包裹#ApprovalPView的固定容器），靠事件冒泡触发逻辑，不受内部元素重载影响。

修改你的输入监听代码即可：

// 原写法（直接绑定到表单节点，重载后失效）
// $(document).ready(function () {
//     $('#ApprovalForm').on('input', function () {
//         $('#saveImage').addClass('blink');
//     });
// });

// 新写法（事件委托绑定到上层固定节点，重载后依然生效）
$(document).ready(function () {
    $(document).on('input', '#ApprovalForm', function () {
        $('#saveImage').addClass('blink');
    });
});

可选优化 #

如果你的保存按钮<i id="saveImage">也在partial view的刷新范围内，你可以在SaveAllEntriesComplete回调函数中额外加一行移除闪烁类的逻辑，避免重载后异常残留：

function SaveAllEntriesComplete() {
    // 原有逻辑保留，加下面这行
    $('#saveImage').removeClass('blink');
}

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