Jquery Function no longer called after submit

Question

I am trying to have a Save button blinking every time an input in a form is modified to let the user know that he needs to save the form each time he modifies an input.

I have added a class in css to have the image in a button to fade in and out. it is working fine. then I have added a script to detect if an input changed and I add the "blinking" class to the button. once the button has been clicked, I remove the class. It is working fine only the first time. then if there is a change (after the button Save has been clicked) in the form again it will no longer detect any changes.

<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>

I use Ajax unobtrusive and since I have more that one button in the form I need to submit the form using Jquery. Basically, What do I have to do have the first script to still listening to an input change after a submit has been done. Hope I am clear.

I forgot to mention, that once submitted the table is reloaded in a partialview. that's probably why there is an issue

*"I use Ajax"* - The code shown implies to me that it's submitting the form as a normal form submit. Are you sure the page isn't reloading at all? If this really is using AJAX, what happens in response to that AJAX operation? Does anything change the DOM? — David, Aug 23 '21 at 15:41
I haved updated the question showing the Form parameters at the top of the html page — Julien7377, Aug 23 '21 at 15:46

score 0 · Answer 1 · answered Aug 23 '21 at 16:18

I answer my own question, the function was no longer triggered because after submitting I was reloading the table in its partialview.

I just needed to replace this

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

by this and now it is working every time.

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

Jquery Function no longer called after submit

1 Answers1