动态组合框问题

Question

我在使用2个使用Ajax和jquery的组合框时遇到问题，第一个组合正常运行，但是当选择一个选项时，第二个组合不起作用。我检查了太多次代码，找不到我的错误在这里。

主要HTML调用的Index.js文件

$(document).ready(function(){
  $.ajax({
    type: 'POST',
    url: 'php/cargarasignaturas.php'
  })
  .done(function(listas_rep){
    $('#subject_id').html(listas_rep)
  })
  .fail(function(){
    alert('Hubo un errror al cargar las Asignaturas')
  })

  $('#subject_id').on('change', function(){
    var id = $('#subject_id').val()
    $.ajax({
      type: 'POST',
      url: 'php/cargarclases.php',
      data: {'id': id}
    })
    .done(function(listas_rep){
      $('#class_id').html(listas_rep)
    })
    .fail(function(){
      alert('Hubo un errror al cargar las Clases')
    })
  })

也是第一个数据库查询文档。

<?php 
require_once 'conexion.php';

function getListasRep(){
  $mysqli = getConn();
  $query = 'SELECT * FROM `subject`';
  $result = $mysqli->query($query);
  $listas = '<option value="0">Elige una opción</option>';
  while($row = $result->fetch_array(MYSQLI_ASSOC)){
    $listas .= "<option value='$row[subject_id]'>$row[subject_title]</option>";
  }
  return $listas;
}

echo getListasRep();

第二个数据库查询文档

<?php 
require_once 'conexion.php';

function getClases(){
  $mysqli = getConn();
  $id = $_POST['id'];
  $query = "SELECT * FROM `class` WHERE subject_id = $id";
  $result = $mysqli->query($query);
  $clases = '<option value="0">Elige una opción</option>';
  while($row = $result->fetch_array(MYSQLI_ASSOC)){
    $clases .= "<option value='$row[class_id]'>$row[class_name]</option>";
  }
  return $clases;
}

echo getClases();

HTML代码

<div class="block">
  <div class="navbar navbar-inner block-header">
    <div id="" class="muted pull-left">
      <h4><i class="icon-plus-sign"></i> Add Class</h4>
    </div>
  </div>
  <div class="block-content collapse in">
    <div class="span12">
      <form method="post" id="add_class">
        <div class="control-group">
          <label>Asignatura:</label>
          <div class="controls">
            <select name="subject_id" id="subject_id" class="" required></select>
          </div>
        </div>
        <div class="control-group">
          <label>Class Name:</label>
          <div class="controls">
            <input type="hidden" name="session_id" value="<?php echo $session_id; ?>">
            <select name="class_id" id="class_id" class="" required></select>
          </div>
        </div>
        <div class="control-group">
          <div class="controls">
            <button name="save" class="btn btn-success"><i class="icon-save"></i> Add/button>
          </div>
        </div>
      </form>
      <script>
        jQuery(document).ready(function($) {
          $("#add_class").submit(function(e) {
            e.preventDefault();
            var _this = $(e.target);
            var formData = $(this).serialize();
            $.ajax({
              type: "POST",
              url: "add_class_action.php",
              data: formData,
              success: function(html) {
                if(html=="true") {
                  $.jGrowl("La Clase ya Existe", { header: 'Fallido' });
                } else {
                  $.jGrowl("Clase Agregada Exitosamente", { header: 'Agregada' });
                  var delay = 500;
                  setTimeout(function(){ window.location = 'dasboard_teacher.php'  }, delay);  
                }
              }
            });
          });
        });
      </script>   
      <script type="text/javascript" src="js/index.js"></script>
    </div>
  </div>
</div>

在控制台中也出现此错误

dasboard_teacher.php:360 Uncaught TypeError: $(...).inputmask is not a function
    at HTMLDocument.<anonymous> (dasboard_teacher.php:360)
    at c (jquery-1.9.1.min.js:3)
    at Object.fireWith [as resolveWith] (jquery-1.9.1.min.js:3)
    at Function.ready (jquery-1.9.1.min.js:3)
    at HTMLDocument.H (jquery-1.9.1.min.js:3)
(anonymous) @ dasboard_teacher.php:360
c @ jquery-1.9.1.min.js:3
fireWith @ jquery-1.9.1.min.js:3
ready @ jquery-1.9.1.min.js:3
H @ jquery-1.9.1.min.js:3
wysihtml5-0.3.0.js:2562 [Deprecation] The behavior that Selection.addRange() merges existing Range and the specified Range was removed. See 
https://www.chromestatus.com/features/6680566019653632 for more details.
(anonymous) @ wysihtml5-0.3.0.js:2562
(anonymous) @ wysihtml5-0.3.0.js:2571
(anonymous) @ wysihtml5-0.3.0.js:269
init @ wysihtml5-0.3.0.js:200
loadHandler @ wysihtml5-0.3.0.js:299