4

以下にjquerymobileボタンを追加しようとすると、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> ');

Jqueryモバイルスタイル（data-role = "button"）を意味するものではありませんか？

以下は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>

以下はJQueryコードです（PLZ注：サービスを呼び出して削除を行いますが、問題はjqueryモバイルスタイルとしてボタンをレンダリングしない場合のみです）

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

私はグーグルとstackoverflowで多くの検索をしました、そして失敗しました私は以下を試みましたが、再起動しませんでした：

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

2 に答える 2

4

私があなたを正しく理解しているなら、あなたは動的にjQuery Mobileボタンを作成し、それを正しくスタイル付けしたいと思うでしょう。

これが実際のjsFiddle例です：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();
});

jQuery Mobileが動的に追加されたコンテンツを処理する方法と、コンテンツを拡張する方法の詳細については、この記事を参照するか、ここで見つけてください。

これは、jQueryMobileの公式ボタンドキュメントへのリンクです。

于 2013-03-26T11:31:52.860 に答える
3

button()Gajotresが提案するように、メソッドを呼び出すことにより、ボタンウィジェットを「手動で」作成できます。

ただし、ウィジェットの種類に依存しない一般的なソリューションが必要な場合createは、祖先要素でイベントをトリガーすることで、jQueryMobileに新しいマークアップに「追いつく」ことができます。

例えば：

$("#bf").html('<a href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button">Add new</a>')
        .trigger("create");
于 2013-03-26T11:36:35.623 に答える