javascript - jPlayer + Bootstrap Modal - DOM 问题

Question

我试图让 Bootstrap 模式通过 ajax 加载一些创建模式的 html。该 html 中将包含 jPlayer。

无论我如何尝试，我绝对无法让按钮在模式中用于音频。

这是我加载模式的方式:

$(document).ready(function() {
    $(".createmodal").click(function(){
        $('<div class="modal hide fade"> ..modal html.. </div>').modal();
    });
});                                      

​

这是 jsfiddle 中的示例——我跳过了 ajax，直接将 html 加载到模态创建中。

我尝试过使用 jquery 的 .load 方法。

JSFiddle:http://jsfiddle.net/R5UDn/

编辑:我尝试将 jplayer 初始化放入模态代码中...如果我使用自动播放，则会触发音频，但控件不起作用。

Answer 1

我在 Plunker 中将您的代码重新编写为 AJAX 调用，它似乎对我有用(Chrome、FF):

Plunker

我做到了，因此页面正文现在直接包含模态并将 html AJAX 响应 (modal-jplayer.html) 加载到 .modal-body 中通过 data-remote 属性。用于激活 jPlayer 的脚本已附加到 modal-jplayer.html。

HTML

<a class="btn" data-target="#myModal" data-remote="modal-jplayer.html" data-toggle="modal">Launch Modal</a>
<div id="myModal" class="modal hide fade">
  <div class="modal-container step-1">
    <div class="modal-header icon">
      <button type="button"class="close"data-dismiss="modal"aria-hidden="true">&times;</button>
      <h4></h4>
    </div>
    <div class="modal-body">
    </div>
  </div>
</div>

modal-jplayer.html

<div id="jquery_jplayer_1"class="jp-jplayer"></div>
<div id="jp_container_1"class="jp-audio">
   ...
</div>
<script>
  $("#jquery_jplayer_1").jPlayer({
    ready: function(event) {
      $(this).jPlayer("setMedia", {
        mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
        oga: "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
      });
    },
    swfPath: "http://www.jplayer.org/2.1.0/js",
    supplied: "mp3, oga"
  });
</script>

我真的不知道这与您实际开发代码中的内容相比如何 - 我只是按照我可能做的方式做了它。

否则，可能导致问题的原因可能是 Modal 插件使用的自动对焦。可以非常简单地禁用它:

$('body').on('shown','.modal', function() {
  $(document).off('focusin.modal')
});

但就像我说的，到目前为止，它在 Plunker 演示中适用于我，而无需使用此解决方法。

<小时/>

_{只是对 future 帖子的建议:如果您正在使用 AJAX，那么请花时间在 JSFiddle 或 Plunker 或您喜欢的任何内容中准备一个类似的 AJAX 示例。 JSFiddle supports AJAX via GitHub Gists 。就我个人而言，我更喜欢 Plunker 来处理任何 AJAX，因为它直接在应用程序中支持多个文件。}