動態添加增強內容

我試圖動態地添加一個彈出窗口到我的頁面，隨着漂亮的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版本，玩弄它。

所以，如果我點擊了顯示靜態彈出它顯示的標題很好，但如果我點擊添加彈出，不是顯示這跟顯示動態彈出新增彈出式彈出窗口的內容看起來不同。（使用鉻）

所以問題是：我如何加入動態添加的彈出內容？

來源

2012-11-08 balazs

您必須重新繪製動態添加的內容。爲此，請在popup.popup();後添加page.page('destroy').page();。

工作示例：http://jsbin.com/orehuv/3/

來源

2012-11-08 17:34:02 imwill

不錯。謝謝。你怎麼看，這是合乎邏輯的？我的意見是'popup（）'應該增強內容，但也許我錯了，剛開始玩JQM。 – balazs

實際上是這樣的'page.html（'

'）.trigger（'refresh'）;'也應該可以工作，但在這種情況下，我不知道爲什麼它不起作用。 – imwill

我找到了解決辦法，你可以插入彈出在同一級別的內容，爲前。

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

很好用這種方式彈出功能還是不錯的，但是當你比如從Ajax請求插入代碼，你必須在頁面中插入彈出和調用組件的方法彈出。

前的.js在Ajax調用文件（響應是彈出的只是代碼）：

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

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

請記住，當你聲明的主要頁面彈出一些，這是不一樣的水平含量。 JQM自動將彈出窗口放置在這個位置，並且不會產生問題。

來源

2013-08-06 02:28:59 Felipez

動態添加增強內容

回答

相關問題