Apply JQuery mobile style on button after add the button programmatically by javascript code
css, html, jquery, jquery-mobile, jquery-mobile-button
Solution
If I understood you correctly, you want to dynamically create a `jQuery Mobile` button and have it styled correctly.
Here's a working `jsFiddle` example: http://jsfiddle.net/Gajotres/m4rjZ/
$(document).on('pagebeforeshow', '#index', function(){
// Add a new button element
$('[data-role="content"]').append('<a id="button" href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button">Button</a>');
// Enhance new button element
$('#button').button();
});
To find out more about how jQuery Mobile handles dynamically added content and how it can be enhanced take a look at this ARTICLE, or find it HERE.
Here's a link to an official jQuery Mobile button documentation.
Problem
When I try to add below jquery mobile button throw jquery code: ``` // insert new button to bf div (breackfast div) $("#bf").html('<a href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button" > Add new </a> '); ``` It doesn't imply the Jquery mobile style (data-role="button") ?? Below is the html: ``` <div data-role="collapsible-set" data-theme="i" data-split-icon="gear" data-split-theme="e"> <div data-role="collapsible"> <h3> Breackfast </h3> <div id="bf" style="margin:0 !important;padding:0 !important; display:inline !important"> <ul data-role="listview" data-theme="i" "> <li> <input type="button" tabindex="@ViewBag.CurInt" id="bdelete" value="DeleteFood" onclick="bfd();"/> </li> </ul> </div> </div> </div> ``` Below is the JQuery code (PLZ note: it call the service and do the delete, but the problem only in not render button as jquery mobile style) ``` <script type="text/javascript"> function bfd() { var fp = '/api/service?prsnIduser1&MealTime=2&CurDate='+ $("#bdelete").attr("tabindex"); $.ajax({ url: fp, type: 'Delete', dataType: 'json', contentType: 'application/json; charset=utf-8', success: function () { $("#bf").html('<a href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button" > Add new </a> '); $("#bf a").buttonMarkup(); }); } </script> ``` I did many search on google and on stackoverflow, And unsuccessfully I attempt below but without resault : ``` $("div[data-role=collapsible]").collapsible({refresh: true }); // or even add : $("#bf").page(); // or $("#bf a").buttonMarkup(); ```