javascript code never execute again

Question

I have this form

<form action="<?php echo "$action"; ?>" id="org-create" method="post" accept-charset="utf-8" form_signature="7347957620155129456">
  <div class="form-group">
    <label for="first-name">First Name</label>
    <input class="form-control panel__input-container" id="name" type="text" name="first_name" placeholder="First Name" value="@@@" required="" style="border: 1px solid red;" field_signature="1938669551">
  </div>
  <div class="form-group">
    <label for="last-name">Last Name</label>
    <input class="form-control panel__input-container" id="name" type="text" name="last_name" placeholder="Last Name" value="!@#!@" required="" style="border: 1px solid red;" field_signature="3389759488">
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input class="form-control panel__input-container" id="email" type="text" name="email" placeholder="Emai Address" value="!@#!@" required="" style="border: 1px solid red;" field_signature="420638584">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input class="form-control panel__input-container" id="password" type="password" name="password" placeholder="Password" value="p" required="" field_signature="2051817934">
  </div>
  <div class="form-group">
    <label for="birthday">Birthday</label>
    <input class="form-control panel__input-container" id="birthday" type="date" name="birthday" value="2" style="border: 1px solid red;">
  </div>
  <div class="form-group">
    <label for="gender">Gender</label>
    <select class="form-control panel__input-container" id="gender" name="gender" field_signature="357851563">
      <option value="">Select Gender</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>
  </div>
  <div class="form-group">
    <label for="department">Department</label>
    <select class="form-control panel__input-container" id="department" name="department" field_signature="3422944626">
      <option value="0">Select Department</option>
      <option value="1" class="drop-down">Management and Information System (MIS)</option>
      <option value="2" class="drop-down">Customer Relation Department</option>
      <option value="3" class="drop-down">Multimedia Department</option>
      <option value="4" class="drop-down">Photography Department</option>
      <option value="5" class="drop-down">Organizing Department</option>
      <option value="6" class="drop-down">Human Resources Department</option>
      <option value="7" class="drop-down">Accounting Department</option>
      <option value="8" class="drop-down">Maintenance Department</option>
    </select>
  </div>
  <div class="form-group">
    <label for="position">Position</label>
    <select class="form-control panel__input-container" id="position" name="position" field_signature="808281270">
      <option value="0">Select Position</option>
    </select>
  </div>
  <div class="form-group">
    <button type="button" class="btn btn-default button--dark pull-right" id="create-account"><span><i class="fa fa-plus"></i></span> CREATE</button>
  </div>
</form>

A form use to create new account in a company, and submit the details via ajax

Here is my code in javascript

$(function() {
  create_account();
});

var create_account = function() {
  $("#create-account").click(function (e) {
    action = this.form.action + '/create';
    ajax_send.submit(this.form, action, '', errors);
  });
}

var errors = function(result) {
  var validation   = result.validation;
  var list_of_dept = result.list_of_dept;

  var html = first_name(validation);
  html += last_name(validation);
  html += email(validation);
  html += password(validation);
  html += birthday(validation);
  html += gender(validation);
  html += department(list_of_dept);
  html += position(validation);
  html += create(validation);

  $('#org-create').html(html);
}

what I'd like to do, is to render again in html with a border red the details from the form which is failed after it undergo the validation.

This code work perfectly, except that, after it render the html again inside the form, edit details and click again the create button this code never execute again.

what to do, so that the code with execute again?

Answer 1

I think instead of using .click you should use .on for binding your click to the button because after the ajaxCall the DOM is modified and the .click event stops firing. click() will be applied on the elements that exist in the DOM and .on() will be applied on all the elements that match that selector even in the future.

You can use .on like this :

$('#create-account').on('click', function() {
      //Your code
});

Answer 2

You can do this via two different way:

1. call this function after binding HTML

var create_account = function() {
  $("#create-account").click(function (e) {
    action = this.form.action + '/create';
    ajax_send.submit(this.form, action, '', errors);
  });
}

var errors = function(result) {
  var validation   = result.validation;
  var list_of_dept = result.list_of_dept;

  var html = first_name(validation);
  html += last_name(validation);
  html += email(validation);
  html += password(validation);
  html += birthday(validation);
  html += gender(validation);
  html += department(list_of_dept);
  html += position(validation);
  html += create(validation);

  $('#org-create').html(html);
  create_account();
} 

2. You can use jQuery on function

$(document).on("click", "#create-account", function (e) {
    action = this.form.action + '/create';
    ajax_send.submit(this.form, action, '', errors);
});

Answer 3

Method 1

After this line:

$('#org-create').html(html);

You need to re-bind the click event again:

$('#org-create').html(html);
create_account();

Method 2

extend your event binding to the global scope:

var create_account = function() {
  $(document).on("click", "#create-account", function (e) {
    action = e.target.form.action + '/create';
    ajax_send.submit(e.target.form, action, '', errors);
  });
}