JQuery shown.bs.modal won't fire

Question

This code is used to EDit the present record in the Database when I click the fa fa-pencil icon. it shows a model.

<a data-toggle="modal" data-target=".Edit-modal" class="Edit disciplinaryActionReview" style="cursor:pointer;cursor:hand;">
<span class="fa fa-pencil-square-o">
</span></a>

This is Modal

<div class="modal Edit-modal" id="myModel">
<div class="modal-dialog" style="width: 1200px">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Edit Items Information</h4>
        </div>
        <div class="modal-body">
            <div class="row">

                <div class="col-md-3">
                    <div class="form-group">
                        <input type="hidden" id="EditHiddenID">
                        <label for="EditIdentification">Title</label>
                        <input type="text" class="form-control" name="Edittitle" id="Edittitle">
                    </div>
                </div>

            </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default mright" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-success" id="saveChanges">Save changes</button>
        </div>

    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

but the Modal didn't show alert.

$("#myModel").on("shown.bs.modal", function () {
      alert("hi");
    });

CODE:

$("#myModel").on("shown.bs.modal", function() {
  alert("hi");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<a data-toggle="modal" data-target=".Edit-modal" class="Edit disciplinaryActionReview" style="cursor:pointer;cursor:hand;">
  <span class="fa fa-pencil-square-o"> Click Here!
</span></a>

<div class="modal Edit-modal" id="myModel">
  <div class="modal-dialog" style="width: 90vw">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Edit Items Information</h4>
      </div>
      <div class="modal-body">
        <div class="row">

          <div class="col-md-3">
            <div class="form-group">
              <input type="hidden" id="EditHiddenID">
              <label for="EditIdentification">Title</label>
              <input type="text" class="form-control" name="Edittitle" id="Edittitle">
            </div>
          </div>

        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default mright" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-success" id="saveChanges">Save changes</button>
      </div>

    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->