jPlayer + Bootstrap 模式 - 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

我这样做是为了让页面的正文现在直接包含一个模式，并通过data-remote 属性将一个html AJAX 响应（modal-jplayer.html）加载到.modal-body 中。激活 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 演示中对我有用，而无需使用此解决方法。

---

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

Answer 2

您需要在 显示模式后加载 jPlayer。否则，jPlayer 将无法放置使播放器正常运行所需的所有钩子。

但是，为什么要从 javascript 加载整个模式代码？真的有这个需求吗？

如果没有，我建议您将模式代码放在页面源代码中 - 而不是使用 javascript 加载它 - 然后将点击处理程序添加到它。