1

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

无论我尝试什么，我都绝对无法让按钮为模态中的音频工作。

这是我加载模式的方式：

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

​</p>

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

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

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

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

4

2 回答 2

1

我将您的代码重新编写为 Plunker 中的 AJAX 调用，它似乎对我有用（Chrome，FF）：

普朗克

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

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

于 2012-12-15T06:16:23.397 回答
0

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

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

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

于 2012-10-30T18:37:37.310 回答