jPlayer + Bootstrap模态 – DOM问题

我试图通过ajax加载一个Bootstrap模式来创建一个模态的html。 这个html里面会有jPlayer。

无论我尝试什么，我绝对无法让按钮在模态中工作。

这是我加载模态的方式：

$(document).ready(function() { $(".createmodal").click(function(){ $('
 ..modal html.. 
').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

 Launch Modal 
 
 
 × 
 
 
 
 
  

莫代尔，jplayer.html

 
 
 ... 
  

我真的不知道你在实际的开发代码中有什么比较 – 我只是按照我的方式去做。

否则，可能导致问题的原因可能是Modal插件使用的自动对焦。 这可以简单地禁用：

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

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

---

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

Answer 2

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

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

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