When I correct the invalid input(s) and try to submit again, the code will not execute

Question

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.

Can you put this into jsfiddle with your html? And include the HTML that is sent back from the server? It may be that it is affecting your markup in a way that it is removing or altering the #account-save id — BenM, Apr 11 '17 at 08:23
Is the `#account_save` element being overwritten by the contents of `result.html`? Show the markup. — David, Apr 11 '17 at 08:25
no, #account-save is the Id of the button, the #user-profile is being overwritten by resutl.html — Fil, Apr 11 '17 at 08:32
I've created a mini version of my code here, at least you can see the html sctructure and javascript https://jsfiddle.net/2jj1gLke/, my actual setup of code involved php so basically it does not out correctly — Fil, Apr 11 '17 at 08:34
@Fil: According to your markup, the `#account_save` element *is* being overwritten by the contents of `result.html`. The linked duplicate explains the problem with that. — David, Apr 11 '17 at 08:37
sorry, that's correct, but, #account_save is included in `result.html` that moment result.html is render it will be the same form again and button — Fil, Apr 11 '17 at 08:40
@Fil: Yes, that's precisely the nature of the problem. Once you've removed the element from the DOM you also remove its event handlers. A new element is added in it place, but has no event handler. The linked duplicate explains in detail. You might also take a look at a post I wrote on the subject long ago: http://publicvoidlife.blogspot.com/2014/03/on-on-or-event-delegation-explained.html — David, Apr 11 '17 at 08:42
`$('#user-profile').on("click","#account_save",function() {` — mplungjan, Apr 11 '17 at 08:46

BenM · Accepted Answer · 2017-04-11T08:59:57.640

1

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

edited Apr 11 '17 at 08:59

answered Apr 11 '17 at 08:27

BenM

4,218
2
31
58

You guessed the problem correctly, but your proposed solution is incorrect. That use of `.on()` has the same problem as the original use of `.click()`, for the same reason. – David Apr 11 '17 at 08:43
My bad, I believe its $(document).on('click', '#account-save' ... etc). I'll update. – BenM Apr 11 '17 at 08:59

When I correct the invalid input(s) and try to submit again, the code will not execute

1 Answers1