弹出关闭Jquery mobile后删除iframe

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>

请注意，弹出的 div id 总是在变化，所以我不能只调用一些 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