Удалить iframe после всплывающего окна закрыть JQuery mobile

Question

Я создал простой мобильный сайт jquery, где вы нажимаете кнопку, и iframe с видео загружается во всплывающее окно.

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

Как я могу избежать этого?

Документация для мобильных телефонов JQuery говорит, что это произойдет, и я должен слушать popupafterclose событие. http://demos.jquerymobile.com/1.2.0/docs/pages/popup/popup-iframes.html

Но как я могу это сделать, может ли кто-нибудь сделать мне пример?

Демонстрация проблемы: http://jsfiddle.net/43nk572m/1/

HTML:

<!-- BUTTONS --> 
    <a href="#testing" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-btn-icon-left ui-icon-info">Open Iframe Popup1</a> 
    <a href="#testing2" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-btn-icon-left ui-icon-info">Open Iframe Popup2</a> 

<!--POPUPS--> 
<div data-role="popup" id="testing" data-theme="b" data-tolerance="15,15"> 
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
    <div data-role="header"> 
    <h1>blablabla</h1> 
    </div> 
    <iframe src="http://player.vimeo.com/video/110823244" width="520" height="360" scrolling="no" seamless="seamless"></iframe> 
</div> 
<div data-role="popup" id="testing2" data-theme="b" data-tolerance="15,15"> 
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
    <div data-role="header"> 
    <h1>blablabla</h1> 
    </div> 
    <iframe src="http://player.vimeo.com/video/110823244" width="520" height="360" scrolling="no" seamless="seamless"></iframe> 
</div> 

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

Я привожу вам помощь! С уважением M

Answer 1

Вы должны попробовать что-то вроде этого:

$("#testing").bind({ 
    popupafterclose: function(event, ui) { 
    $(this).find('iframe').remove(); 
    } 
}); 

Answer 2

Для всплывающей DIV, вы можете использовать селектор JQuery '[data-role="popup"]'. Для того, чтобы поймать событие popupafterclose, делегировать его из документа, так что любые динамически создаваемые всплывающие окна будут инициировать событие:

$(document).on("popupafterclose", '[data-role="popup"]', function(event, ui) { 
    $(this).find("iframe").prop("src", ""); 
}); 

В обработчик событий, найти элемент IFrame и установите его Src опору в пустую строку.

DEMO