加載後將jQuery Mobile元素添加到頁面中？

在這個例子的jsfiddle ...加載後將jQuery Mobile元素添加到頁面中？

...我想添加一個div裏面jQuery Mobile的樣式按鈕的頁面加載後。頁面加載時出現在頁面上的大按鈕看起來很棒......但是當我嘗試添加另一個類似外觀的按鈕時（通過點擊「添加另一個按鈕」），它不會被設置爲它應該（即使我'追加'通過jQuery的按鈕正確的HTML代碼）。

下面是完整的代碼...

<!DOCTYPE html> 
<html> 

<head> 

    <title>Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 

</head> 

<body> 

    <!-- Mark-up --> 

    <input id="addButton" type="button" value="Add Another Button"> 

    <div style="width: 300px; height: 400px; top: 50px; left: 10px; position: absolute; border: 1px solid black;" > 
     <section id="page1" data-role="page"> 
      <div class="content" data-role="content"> 
      <a href="#" data-role="button">This is a button!</a> 
      </div> 
     </section> 
    </div> 

    <!-- Script --> 

    <script> 
     $(document).ready(function() { 
      $('#addButton').click(function() { 
       $('.content').append('<a href="#" data-role="button">This is another button!</a><br />'); 
      }); 
     }); 
    </script> 

</body> 
</html>

缺少什麼我在這裏？我如何讓jQuery Mobile識別對HTML的動態更新？

謝謝！

來源

2013-04-03 NotQuiteThereYet

這裏有一個工作示例：http://jsfiddle.net/Gajotres/2uerX/

$(document).on('pagebeforeshow', '#index', function(){  
    $('#addButton').click(function() { 
     $('.content').append('<a href="#" data-role="button">This is another button!</a><br />'); 
     $('[data-role="button"]').button(); 
    }); 
});

當你動態地添加新的內容JQM，JQM也必須加強新的內容。而在按鍵的情況下，它是用做：

$('[data-role="button"]').button();

要了解更多關於它看看我其他的答案/文章：jQuery Mobile: Markup Enhancement of dynamically added content

來源

2013-04-03 19:40:23 Gajotres

Gajotres ...我剛剛看了你的其他物品。很有幫助！如果你不介意的話，還有1個更快的問題。假設我想增強整個頁面，*除1個特定項目外*。例如...在我的jsFiddle示例中，我想要增強大矩形div（大按鈕）中的所有內容，但我不想增強頂部的小按鈕（#addButton）。我會怎麼做？ – NotQuiteThereYet 2013-04-03 20:05:32

你會爲該按鈕添加一個data-role =「none」，這將阻止該按鈕樣式 – Gajotres 2013-04-03 20:14:07

加載後將jQuery Mobile元素添加到頁面中？

回答

相關問題