Jquery код работает только при отображении нет

Question

У меня есть значок корзины. Когда я нахожу курсор на значок корзины, отображение одного div меняется с display:none на display:block, что означает, что div появляется только при наведении курсора на значок корзины. Этот div содержит одну кнопку Просмотр корзины , при нажатии которой мне нужно что-то предупредить.

Это мой код, который я набрал в консоли. Но это работает только тогда, когда я сначала нахожу значок (значок при наведении меняет display:none div на display:block), а затем пишу на консоли. Если я напишу этот код в консоли перед зависанием, он не сработает.

$('#qa_cartletCartButton').click( function(){alert('yes');} );

ID div: cartletDrop

ID button: qa_cartletCartButton

Эти коды также не работают.

if ($('#cartletDrop').is(':hidden')) {
  $("#qa_cartletCartButton").click(function() {
    alert('yes')
  });
}

if ($('#cartletDrop').is(':visible')) {
  $("#qa_cartletCartButton").click(function() {
    alert('yes')
  });
}

Это код сайта HTML, который я удаляю.

<div class="shopping_cart">
  <header class="header">
    <a href="/chemicals/shop/cart?nocache=1596440273788" class="shopping_cart_icon" id="shopping_cart_icon_cartlet">
      <span><img src="/content/dam/fishersci/en_US/images/icon-cart-l-xl-empty.svg"></span>
      <span class="shopping_cart_quantity">3</span>
    </a>
  </header>
  <section style="display: none;" id="cartletDrop" data-refresh="0">
    <div class="cartlet-display">
      <p class="bold cartletMaxMsg" id="qa_cartletMaxMsg">Recently Added to Your Cart</p>
      <ul id="cartletItems">
      </ul>
      <p class="cartletSubtotal"><span class="float_left" id="qa_cartletSubtotalLabel">Subtotal:</span> <span class="float_right" id="qa_cartletSubtotal">41,486.00</span></p>
      <p><a class="float_right cartButton btn primary" href="/chemicals/shop/cart?nocache=1596440278170" id="qa_cartletCartButton">view cart</a></p>
    </div>
  </section>
</div>

Эта строка в html пусто перед наведением.

 <section style="display: none;" id="cartletDrop" data-refresh="0">
</section>

После наведения курсора на значок корзины теперь он выглядит следующим образом. Изменяются только свойства отображения.

  <section style="display: none;" id="cartletDrop" data-refresh="0">
    <div class="cartlet-display">
      <p class="bold cartletMaxMsg" id="qa_cartletMaxMsg">Recently Added to Your Cart</p>
      <ul id="cartletItems">
      </ul>
      <p class="cartletSubtotal"><span class="float_left" id="qa_cartletSubtotalLabel">Subtotal:</span> <span class="float_right" id="qa_cartletSubtotal">41,486.00</span></p>
      <p><a class="float_right cartButton btn primary" href="/chemicals/shop/cart?nocache=1596440278170" id="qa_cartletCartButton">view cart</a></p>
    </div>
  </section>

кажется html тег внутри раздела отсутствует перед первым наведением.