javascript代码永远不会再执行

Question

我有这个表格

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

用于在公司创建新帐户的表单，并通过ajax提交详细信息

这是我的 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);
}

我想做的，是在 html 中再次渲染，并用红色边框显示表单中的详细信息，该表单在经过验证后失败。

这段代码工作得很好，除了在表单内再次渲染 html 后，编辑详细信息并再次单击创建按钮，这段代码再也不会执行。

要做什么才能让代码再次执行？

Answer 1

您可以通过两种不同的方式执行此操作:

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);
});