Jquery函数提交后不再被调用

Question

我试图有一个保存按钮闪烁每次在表单中的输入被修改，让用户知道他需要保存表单每次他修改输入

我在css中添加了一个类，使图像在按钮中淡出。它工作得很好。然后我添加了一个脚本来检测输入是否发生了变化，并添加了"blinking"类设置为按钮。单击按钮后，删除类。它只是第一次工作得很好。然后，如果在表单中再次发生更改(在单击Save按钮之后)，它将不再检测任何更改。

<form id="ApprovalForm"
data-ajax-method="post"
data-ajax="true"
data-ajax-update="#ApprovalPView"
data-ajax-complete="approvalComplete"
asp-controller="Approval"
asp-action="ApprovalForm"
enctype="multipart/form-data">

<td style="text-align:left; vertical-align:middle">
<button id="saveAllEntries" style="vertical-align:middle" type="submit" name="ButtonType" 
value="SaveAll" title="Save Approvals List"><i id="saveImage" class="ti-save"></i></button>
</td>

<script>
$(document).ready(function () {
$('#ApprovalForm').on('input', function () {
$('#saveImage').addClass('blink');
});
});
</script>

<script>
$(document).on('click', '#saveAllEntries', function (e) {
$('#saveImage').removeClass('blink');
$("#ApprovalForm").attr("data-ajax-complete", "SaveAllEntriesComplete");
e.preventDefault();
var form = $(this).parents('form');
var par = 'SaveAll';
$('<input />').attr('type', 'hidden')
.attr('name', 'ButtonType')
.attr('value', par)
.appendTo(form);
$('#cover-spin').show(0);
form.submit();

});

</script>

我使用Ajax不引人注目，因为我在表单中有多个按钮，我需要使用Jquery提交表单。基本上，我要做的是让第一个脚本在提交完成后仍然侦听输入更改。希望我讲清楚了。

我忘了说，一旦提交表在partialview中被重新加载。这可能就是有问题的原因

Answer 1

我回答我自己的问题，这个函数不再被触发，因为在提交后，我在它的partialview中重新加载了表。

我只是需要替换这个

<script>
$('#ApprovalForm').on('input', function () {
$('#saveImage').addClass('blink');
});
</script>

通过这个，现在它每次都工作。

<script>
$(document).on('input', '#ApprovalForm', function () {
$('#saveImage').addClass('blink');
});
</script>