jPlayer + Bootstrap Modal - DOM Issues

问题

I'm trying to get a Bootstrap modal to load via ajax some html that creates a modal. This html will have jPlayer in it.

I absolutely cannot get the buttons to work for the audio in the modal no matter what I try.

Here's how I'm loading the modal:

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

Here's the example in jsfiddle -- I skipped the ajax and just loaded the html straight into the modal creation.

I've tried using jquery's .load method.

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

Edit: I've tried putting the jplayer initialization in the modal code... the audio fires if I use autoplay, but the controls do not work.

回答1:

I redid your code as an AJAX call in Plunker, and it seems to work for me (Chrome, FF):

Plunker

I made it so the body of the page now includes a modal directly and loads an html AJAX response (modal-jplayer.html) into the .modal-body via the data-remote attribute. The script to activate the jPlayer is appended to the 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>

I don't really know how that compares to what you have in your actual development code - I just did it the way I might do it.

Otherwise, something that might be causing an issue could be the auto-focus which the Modal plugin employs. That can be disabled rather simply:

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

But like I said, as of now, it works for me in the Plunker demo without having to use this workaround.

_{Just a recommendation for future posts: If you're using AJAX then please take the time to prepare a comparable AJAX example in either JSFiddle or Plunker, or whatever you prefer. JSFiddle supports AJAX via GitHub Gists. Personally I prefer Plunker for anything AJAX because it supports multiple files directly in the app.}

回答2:

You need to load the jPlayer after displaying the modal. Otherwise, jPlayer is not going to be able to place all hooks it needs to make the player functional.

But, why are you loading the whole modal code from javascript? Is there a real need for this?

If not, I suggest you put the modal code already on the page source - instead of loading it with javascript - and then just add the click handler to it.

来源：https://stackoverflow.com/questions/13145480/jplayer-bootstrap-modal-dom-issues

标签

javascript

jquery

jquery-ui

twitter-bootstrap

jplayer