test.jsの「.on('show.bs.modal', function (e)」箇所で以下のようなエラーが出ており、
モーダルは表示されるのですが、モーダルのタイトルが書き換わりません…。
onの使い方、bootstrapのモーダルの書き方がおかしいのでしょうか？

test.js:2 Uncaught TypeError: $(...).on is not a function
    at HTMLDocument.<anonymous> (VM31857 test.js:2)
    at Function.<anonymous> (VM31855 jquery.min.js:19)
    at Function.each (VM31855 jquery.min.js:12)
    at Function.ready (VM31855 jquery.min.js:19)
    at HTMLDocument.<anonymous> (VM31855 jquery.min.js:19)

●test.js

$(function () {

  $("#testModal").on('show.bs.modal', function (e) {
    setTimeout(function(){
    var button = $(event.relatedTarget);
    var recipient = button.data("name");
    var modal = $(this);
    modal.find(".modal-title").text(recipient);
    }, 300);                        
  });

});

●index.html

～
<button type="button" class="btn btn-default" data-toggle="modal" data-name="test" data-target="#testModal">表示</button>
～
    <div class="modal" style="z-index: 1500" id="testModal" 
         tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" data-show="true" data-keyboard="false" data-backdrop="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&#215;</span><span class="sr-only">閉じる</span>
            </button>
            <h4 class="modal-title">タイトル</h4>
          </div><!-- /modal-header -->
          <div class="modal-body">
            <p class="recipient">内容</p>
          </div>
        </div> <!-- /.modal-content -->
      </div> <!-- /.modal-dialog -->
    </div> <!-- /.modal -->

～