Zastosuj styl JQuery mobilnej na przycisk po dodać przycisk programmaticlly przez kod JavaScript

Question

Gdy próbuję dodać poniżej jquery telefonu kodu rzut przycisk jquery:

 // insert new button to bf div (breackfast div) 
     $("#bf").html('<a href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button" > Add new </a> '); 

To nie oznacza styl mobilnej jQuery (dane-role = "przycisk")?

Poniżej jest 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> 

Poniżej znajduje się kod jQuery (PLZ UWAGA: wezwać serwis i zrobić delete, ale problem tylko w nie przycisk jako jquery stylu telefonu render)

   <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> 

zrobiłem wiele wyszukiwania w Google i na stackoverflow, i bezskutecznie próbuję poniżej, ale bez resault:

 $("div[data-role=collapsible]").collapsible({refresh: true }); 
     // or even add : 
      $("#bf").page(); 
      // or 
      $("#bf a").buttonMarkup(); 

Answer 1

Jeśli zrozumiałem cię poprawnie, chcesz dynamicznie utworzyć przycisk i ustawić go prawidłowo.

Oto pracuje jsFiddle przykład: 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(); 
}); 

Aby dowiedzieć się więcej na temat jQuery Komórka obsługuje dynamicznie zawartości dodatku i jak może zostać zwiększona przyjrzeć się tej ARTICLE, lub go znaleźć HERE.

Oto link do oficjalnego przycisku jQuery Mobile documentation.

Answer 2

Możesz utworzyć widżet przycisku "ręcznie", wywołując metodę button(), jak sugeruje Gajotres.

Jeśli jednak potrzebujesz ogólnego rozwiązania, które nie zależy od typu widgetu, możesz jQuery Mobile "nadrobić zaległości" do nowego znacznika, uruchamiając zdarzenie create na elemencie przodka.

Na przykład:

$("#bf").html('<a href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button">Add new</a>') 
     .trigger("create");