1

モーダルを作成するいくつかのhtmlをajax経由でロードするブートストラップモーダルを取得しようとしています。このhtmlにはjPlayerが含まれます。

何を試しても、モーダルのオーディオでボタンを機能させることは絶対にできません。

モーダルをロードする方法は次のとおりです。

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

</ p>

これがjsfiddleの例です-私はajaxをスキップし、htmlをモーダル作成に直接ロードしました。

jqueryの.loadメソッドを使用してみました。

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

編集：jplayerの初期化をモーダルコードに入れてみました...自動再生を使用するとオーディオが起動しますが、コントロールが機能しません。

4

2 に答える 2

1

私はあなたのコードをPlunkerでAJAX呼び出しとしてやり直しました、そしてそれは私のために働くようです（Chrome、FF）：

プランカー

これで、ページの本文にモーダルが直接含まれ、html AJAX応答（modal-jplayer.html）が属性.modal-bodyを介してロードされるようになりました。data-remotejPlayerをアクティブ化するためのスクリプトが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>

それが実際の開発コードにあるものとどのように比較されるのか、私にはよくわかりません。私はそれを自分のやり方でやっただけです。

そうでなければ、問題を引き起こしている可能性のあるものは、モーダルプラグインが採用しているオートフォーカスである可能性があります。それはかなり簡単に無効にすることができます：

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

しかし、私が言ったように、今のところ、この回避策を使用しなくても、Plunkerデモで機能します。

今後の投稿のための単なる推奨事項：AJAXを使用している場合は、時間をかけて、JSFiddleまたはPlunker、あるいはお好みのもので同等のAJAXの例を準備してください。 JSFiddleは、GitHubGistsを介してAJAXをサポートします。個人的には、アプリで直接複数のファイルをサポートするため、AJAXにはPlunkerが好きです。

于 2012-12-15T06:16:23.397 に答える
0

モーダルを表示した後、jPlayerをロードする必要があります。そうしないと、jPlayerは、プレーヤーを機能させるために必要なすべてのフックを配置できなくなります。

しかし、なぜjavascriptからモーダルコード全体をロードするのですか？これは本当に必要ですか？

そうでない場合は、JavaScriptを使用してロードするのではなく、モーダルコードをページソースに既に配置してから、クリックハンドラーを追加することをお勧めします。

于 2012-10-30T18:37:37.310 に答える