Anwenden JavaScript-Code

Question

Wenn ich versuche, unter jQuery Mobile Taste throw jquery Code hinzufügen:

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

Es wird nicht den JQuery mobilen Stil (Daten-Rolle bedeuten = "Knopf") ??

Unten ist die 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> 

Unten ist der JQuery-Code (PLZ beachten: den Service anrufen und den Lösch tun, aber das Problem nur in nicht machen Taste wie jQuery Mobile-Stil)

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

ich habe viele Suche auf google und auf Stackoverflow, und erfolglos versuche ich unter, aber ohne resault:

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

Answer 1

Wenn ich Sie richtig verstanden habe, möchten Sie dynamisch eine jQuery Mobile Schaltfläche erstellen und richtig formatieren lassen.

Hier ist ein Arbeits jsFiddle Beispiel: 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(); 
}); 

Um mehr zu erfahren, wie jQuery Mobile behandelt dynamisch hinzugefügt Inhalt und wie kann sie einen Blick auf diese ARTICLE nehmen verstärkt werden, oder es finden HERE.

Hier ist ein Link zu einer offiziellen jQuery Mobile Schaltfläche documentation.

Answer 2

Sie können ein Button-Widget "von Hand" erstellen, indem Sie die Methode button() aufrufen, wie Gajotres vorschlägt.

Wenn Sie jedoch eine generische Lösung wünschen, die nicht vom Widget-Typ abhängig ist, können Sie jQuery Mobile aufholen, indem Sie das Ereignis create auf einem Vorfahrenelement auslösen.

Zum Beispiel:

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