Не удается открыть модальное окно с помощью кнопки, если установлено значение on('show.bs.modal')

$(document).ready(function(){
  $('#show').click(function(){
    $('#loginForm').modal('show');
  });
  
  $('#loginForm').on('show.bs.modal', function () {
    var val = $('#show').data('id');
    alert(val);
  });

});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<button class = "btn btn-primary btn-sm" id='show' data-id = "1">Show Modal</button>
<div class = "modal fade" id = "loginForm" style = "box-shadow: 5px 5px 5px grey;" tabindex = "-1" role = "dialog" aria-labelledby = "print_size" aria-hidden = "true">
  <div class = "modal-dialog modal-dialog-centered modal-md" role = "document">
    <div class = "modal-content">
      <div class = "modal-header modal-center-heading">
        <h5 class = "modal-title" id = "exampleModalLabel">Login</h5>
        <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
          <span aria-hidden = "true">&times;</span>
        </button>
      </div>
      <div class = "modal-body">
        <div class = "empty">

            <input type = "email" placeholder = "Email" class = "input-style" name = "">
            <input type = "password" placeholder = "* * * * * * *" name = "" class = "input-style">
        </div>
      </div>
      <div class = "modal-footer" style = "border-width: 0px;">
        <button type = "button" class = "btn btn-primary" data-dismiss = "modal" id = "a4Size">Login</button>
        <button type = "button" class = "btn btn-danger" data-dismiss = "modal" id = "a4Size">Cancel</button>
      </div>
    </div>
  </div>
</div>