2

素敵なJQMコンテンツ（ボタンなど）を使用して、ページにポップアップを動的に追加しようとしています。ポップアップは追加されますが、スタイルは適用されません。

コードは次のとおりです（それほど長くないので、ここにコピーしました）：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  </head>
  <body>
    <div id='page' data-role='page'>

      <div data-role='header'>
        <h1> Header </h1>
      </div>

      <div data-role='content'>
        <p>Code sample</p>
        <a id='add' data-role='button'> Add popup </a>
        <a href='#popup' data-role='button' data-rel='popup'> Show dynamic popup </a>
        <a href='#popup2' data-role='button' data-rel='popup'> Show static popup </a>

      </div>
      <div id="popup2" data-role='popup'>
        <div data-role="header"> 
          <h1>Popup Header</h1> 
        </div>
        <div data-role="content"> 
          <p>Some content</p> 
        </div>
      </div>

    </div>
    <script>
      $(document).ready( function(){
        $('#add').bind( 'click', function(ev){
          var
            page = $('#page');
          var 
              popup = $('<div id="popup" data-role="popup"></div>').appendTo( page )
            , header = $('<div data-role="header"> <h1>Popup Header</h1> </div>').appendTo( popup )
            , content = $('<div data-role="content"> <p>Some content</p> </div>').appendTo( popup );
          popup.popup();
        });
      });
    </script>
  </body>
</html>

JsBinバージョンがあります。

したがって、[静的ポップアップの表示]をクリックするとヘッダーが適切に表示されますが、[ポップアップの追加]をクリックすると、この新しく追加されたポップアップを[動的ポップアップの表示]で表示すると、ポップアップの内容が異なって表示されます（chromeを使用）

したがって、問題は、動的に追加されたポップアップコンテンツをどのように強化できるかということです。

4

2 に答える 2

6

私は解決策を見つけました、例えば、あなたはコンテンツと同じレベルにポップアップを挿入することができます。

<div data-role="page" >
  <div data-role="content" ></div>
  <div data-role="popup"></div>
</div>

この方法ではポップアップ機能は優れていますが、たとえばajaxリクエストからコードを挿入する場合は、ページにポップアップを挿入し、コンポーネントのメソッドポップアップを呼び出す必要があります。

ajax呼び出しのex.jsファイル（応答はポップアップのコードのみです）：

$('#page').append(response).trigger('create');

$("#popup").popup();

プリンシパルページでポップアップを宣言するとき、それはコンテンツと同じレベルではないことに注意してください。JQMは自動的にポップアップをこの場所に配置し、問題は発生しません。

于 2013-08-06T02:28:59.730 に答える
1

動的に追加されたコンテンツを再描画する必要があります。これを行うには、のpage.page('destroy').page();後に追加しpopup.popup();ます。

実例： http： //jsbin.com/orehuv/3/

于 2012-11-08T17:34:02.970 に答える