Как изменить модальный контент в зависимости от типа кнопки?

Question

Я совершенно не понимаю, почему мой код не работает в данный момент. У меня есть модальное имя «requestView», и я хочу изменить заголовок модального (этот код должен изменить заголовок на «Новое сообщение для @mdo»), основываясь на кнопке, но в настоящее время он не работает.

Это кнопка, которую я должен вызвать модальный RequestView:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#requestView" data-whatever="@mdo">Open modal for @mdo</button>

Так выглядит заголовок requestView (я не включил другой / div для актуальности):

<div class="modal fade" id="requestView" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="ModalLongTitle">New message</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

Мой jQuery скрипт выглядит так:

<script type="text/javascript">
    $('#requestView').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var recipient = button.data('whatever')
      var modal = $(this)
      modal.find('.modal-title').text('New message to ' + recipient)
      modal.find('.modal-body input').val(recipient)
    })
</script>

В настоящее время я думаю, что проблема в том, что событие не распознается, но у меня нет Идея как это исправить.