javascript - jPlayer + Bootstrap模式-DOM问题

我正在尝试通过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初始化放入模态代码中……如果使用自动播放功能，则会触发音频，但是控件无法正常工作。

最佳答案

我在Plunker中将您的代码重做为AJAX调用，似乎对我有用（Chrome，FF）：

Plunker

我做到了，因此页面的主体现在直接包含一个模式，并通过.modal-body属性将html AJAX响应（modal-jplayer.html）加载到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演示中对我有效，而不必使用此替代方法。



只是对以后的帖子的建议：如果您使用的是AJAX，请花时间在JSFiddle或Plunker或您喜欢的任何东西中准备一个类似的AJAX示例。 JSFiddle supports AJAX via GitHub Gists。就我个人而言，我更喜欢将Plunker用于任何AJAX，因为它直接在应用程序中支持多个文件。

关于javascript - jPlayer + Bootstrap模式-DOM问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13145480/