I have this code in javascript/jquery which takes input from a form with ID #account-save and is using ajax ajax_send.submit(false, action, data, account_save); to submit data to the server.
The following code will successfully submit the data. If the data submitted contains invalid inputs, the code below receive html that marked red those inputs containing the invalid data.
(function($, undefined) {
"use strict";
$(function() {
$("#account-save").click(function(e) {
var action = $(this).data('action') + '/edit';
var data = { 'form_data': $('#user-profile').serialize() }
ajax_send.submit(false, action, data, account_save);
});
});
function account_save(result = false) {
if (result != false) {
$('#user-profile').html(result.html);
}
}
})(jQuery);
The problem is, when I correct the invalid input(s) and try to submit again, the code above will not execute.
Is there anyone have the same problem? Any help would be appreciated.
I think that when your html is being sent back, it is replacing the #account-save node entirely, meaning it has essentially been removed from the DOM as far your your .click method is concerned.
Change your $(document).on('click', '#account-save', function(e) to make to make it late binding. This way your event listeners can attach themselves to elements added to the DOM