Jquery. Не нажимается кнопка

$(function () {
  $('#subscribe-button').on('click', function (e) {
    e.preventDefault();
    $('.popup-overlay-subscribe').addClass('open');
  })
  $('.close').on('click', function (e) {
    $('.popup-overlay-subscribe').removeClass('open');
  })
  $('.popup-overlay-subscribe').on('click', function (e) {
    var overlay = $('.popup-overlay-subscribe');
    var modal = $('.popup-subscribe');
    if (!modal.is(e.target) && modal.has(e.target).length === 0) {
      $(this).removeClass('open');
    }
  })
})

.popup-overlay-subscribe{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(#000, 0.35);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    &.open {
      opacity: 1;
      visibility: visible;
    }
    & .popup-position {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    & .popup-subscribe {
      width: 358px;
      background: #ffffff;
      box-shadow: 0px 0px 17.7465px rgba(0, 0, 0, 0.12);
      border-radius: 17px;
      padding: 29px 43px 35px 45px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="subscribe-button">Подписаться</a>

<section class="popup-overlay-subscribe">
  <div class="popup-position">
    <div class="popup-data popup-subscribe">
      <div class="close"><img src="img/close.svg" alt=""></div>
      <div class="person-img"><span class="icon-person"></span></div>
      <form action="#">
        <h4>Регистрация</h4>
        <div class="form-group">
          <div class="form-line"><input class="phone" type="tel" placeholder="Телефон"></div>
          <div class="form-line"><input class="password" type="password" placeholder="Пароль"></div>
          <div class="form-line"><input class="password" type="password" placeholder="Подтвердите пароль">
          </div>
        </div>
        <div class="form-checkbox">
          <div class="checkbox-line">
            <input type="checkbox" name="get-messages">
            <div class="checkbox" id="get-messages"></div>
            <label for="get-messages">Хочу получать выгодные предложения от магазина</label>
          </div>
          <div class="checkbox-line">
            <input type="checkbox" name="privacy-policy" checked>
            <div class="checkbox active checked" id="privacy-policy"></div>
            <label for="privacy-policy">
              <span>Принимаю условия <a href="#">Пользовательского                     соглашения, Политики конфиденциальности</a>
              </span>
            </label>
          </div>
        </div>
        <button type="button" class="registr">Зарегистрироваться</button>
      </form>
    </div>
  </div>
</section>