jQuery - как иметь кнопку fadeOut () внутри элемента, который скрыт при загрузке страницы?

Question

У меня есть два простых скрипта, первый показывает div при нажатии. Внутри этого div находится кнопка закрытия (очень простое модальное окно). Div по умолчанию qrTooltip скрыт, с отображением: нет. Я могу заставить это показать хорошо, но функция закрытия не работает. Я предполагаю, что это потому, что разметка должна присутствовать, когда страница загружается для того, чтобы jQuery сделал свое дело, и поскольку div скрыт, он никогда не добавляет код jQuery к якору.

Есть ли простой способ обойти это?

<script language="javascript">
$('#btnQr').click(function() {
    $('#qrTooltip').fadeToggle('fast', function () {
    // Animation complete
  });
});
</script>

   <script language="javascript">
    $('#btnQrClose').click(function() {
        $('#qrTooltip').fadeOut('fast', function () {
        // Animation complete
      });
    });
    </script>

<a href="#" id="btnQr">show</a>


<div id="qrTooltip">
<a href="#" id="btnQrClose">hide</a>
</div>

Answer 1

Это потому, что ваш Javascript проверяется до того, как кнопка существует.Попробуйте что-то вроде этого:

<script language="javascript">
$(function(){
   $('#btnQrClose').click(function() {
       $('#qrTooltip').fadeOut('fast', function () {
           // Animation complete
       });
    });
});
</script>

Answer 2

использовать событие jQuery .live(). Смотрите здесь: http://api.jquery.com/live/