Question

我正在尝试通过ajax加载一个Bootstrap模式来创建一个模态的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

我做了这样，页面的主体现在直接包含一个模态，并通过{{1}将html AJAX响应（ modal-jplayer.html ）加载到.modal-body }属性。激活jPlayer的脚本将附加到 modal-jplayer.html 。

HTML

data-remote

模态-jplayer.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插件使用的自动对焦。可以简单地禁用它：

<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>

但就像我说的那样，截至目前，它在Plunker演示中对我有用，而无需使用此解决方法。

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

Answer 2

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

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

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

jPlayer + Bootstrap模式 - DOM问题

2 个答案:

Plunker

HTML

模态-jplayer.html