Как повесить magnificPopup, если кнопка была загружена виртуально?

<button href="#form" class="real">Real Button</button>
<div class="new"></div>    
<div id="form" class="popup-info mfp-hide">Popup</div>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet" />

 var data=`<button href="#form" class="virt">Virt Button</button>`;

 $('.real').magnificPopup({
    type: 'inline',
  });

  $('.virt').magnificPopup({
    type: 'inline',
  });

  $('.real').click(function(){
    $('.new').html(data);
  });

Кнопка с классом virt загружается посредством события .html(). Я знаю, что в таких случаях, чтобы повесить событие click, надо использовать не просто click, а

$(document).on('click', '.virt', function(){
    ...;
 });

А можно ли повесить на такую виртуальную кнопку magnificPopup (чтобы при нажатии на нее всплывала Popup)?

https://jsfiddle.net/Nata_Hamster/2rywhozb/


Ответы (1 шт):

Автор решения: user43436

Получилось самостоятельно найти. Если кому интересно - https://jsfiddle.net/Nata_Hamster/56w2tcjr/ Спасибо всем, кто пытался принимать участие.

 $(document).on('focus', '.virt', function(){
    $('.virt').magnificPopup({
    type: 'inline',
  });
 });
→ Ссылка