jPlayer +引导模态 - DOM问题(jPlayer + Bootstrap Modal -

我试图让一个引导模式通过Ajax加载一些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调用，它似乎对我来说（铬，FF）的工作：

Plunker

我把它这样的页面的主体现在直接包括一个模态并加载一个html AJAX响应（ 模态-jplayer.html）插入.modal-body经由data-remote属性。激活jPlayer脚本被附加到模式，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>

莫代尔，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>

我真的不知道该怎么都比不上你有你的实际开发的代码是什么 - 我只是做了我可能做到这一点。

否则，这东西可能会引起一个问题，可能是自动对焦，其中模态插件使用。这可以简单而禁用：

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

但是就像我说，截至目前，它为我工作在Plunker演示，而不必使用此解决办法。

_{只是为了以后的文章中建议：如果你正在使用AJAX，那么请采取在任的jsfiddle或Plunker，或任何你喜欢的准备相当AJAX例子的时候。} _{通过的jsfiddle GitHub的要旨支持AJAX 。} _{我个人更喜欢Plunker任何东西AJAX，因为它直接在应用程序支持多个文件。}