ダイナミックフィールドを持つjQueryMobileとdateboxプラグイン

Question

JQueryMobile最終リリースとjquery.mobile.datebox.jsプラグインを使用しています。 pageshowイベントでは、一連のフィールドを動的に追加しています。これらのうちのいくつかは、dateboxプラグインを使用する日付/時刻フィールドです。特に小さなデバイスやiPhoneを除いてすべてうまく動作します（デスクトップブラウザでは、特に狭くするとこの問題が発生します）。ヘルパーがポップアップする日付または時間のアイコンをクリックすると、日付/時刻を選択することができ、それはフィールドに入りますが、フィールドはその中の他のものと共に複製されます。

ページショーコードの例を示します。フォームに追加する必要があるフィールドを定義したjsonデータを取得するためにWebサービスを呼び出します。フィールドには、日付、ラジオ、またはテキストを指定できます。それはすべてのポップアップの後、日付/時刻フィールドの再描画を除いて正常に動作します：私はこの問題を推測している

$('#editthing').live('pageshow', function (e, info) { 
    var listurl = "/editthingattribute"; 
    //Add a cache 'buster' parameter 
    var date = new Date(); 
    listurl = listurl + '?p_uid=' + date.getTime(); 
    $.ajax({ 
     url: listurl + "&p_id=" + getUrlVar("p_id") + "&p_thingattribute=" + getUrlVar("p_thingattribute"), 
     contentType: "application/json; charset=utf-8", 
     dataType: 'json', 
     success: function (data) { 
      var form = $("#formcontent"); 
      form.html = ""; 
      //Add the fields defined in the results from the database call 
      $.each(data.editthingfields, function (index, item) { 
       //Set the global field type 
       fieldType = item.fieldType; 

       if (item.fieldtype == 'date') { 
        inputType = 'date'; 

        //This messes up on narrow browsers 
        form.append('<div data-role="fieldcontain">' + '<label for="' + item.fieldname + '_date">' + item.fieldlabel + ' (Date)</label>' + '<input name="' + item.fieldname + '_date" id="' + item.fieldname + '_date" ' + 'type="date" data-role="datebox" data-options=\'{"mode": "calbox", "dateFormat":"dd/mm/YYYY"}\' ' + 'value="' + item.fieldvalue.substring(0, 10) + '" />' + '</div>' + '<div data-role="fieldcontain">' + '<label for="' + item.fieldname + '_time">' + item.fieldlabel + ' (Time)</label>' + '<input name="' + item.fieldname + '_time" id="' + item.fieldname + '_time" ' + 'type="date" data-role="datebox" data-options=\'{"mode": "timebox"}\' ' + 'value="' + item.fieldvalue.substring(11, 17) + '" />' + '</div>'); 
       } else if (item.fieldtype == 'radio') { 
        inputType = 'radio'; 
        //Add a suitable set of radio buttons for the attribute being edited. 
        form.append('<div data-role="fieldcontain">' + '<fieldset data-role="controlgroup">' + '<legend>' + item.fieldlabel + '</legend>'); 
        var optionsarray = item.fieldoptions.split(','); 
        for (var i = 0; i < optionsarray.length; i++) { 
         if (item.fieldvalue == optionsarray[i]) { 
          form.append('<input name="' + item.fieldname + '" id="' + optionsarray[i] + '" ' + 'type="' + item.fieldtype + '" value="' + optionsarray[i] + '" checked="checked" />'); 
         } else { 
          form.append('<input name="' + item.fieldname + '" id="' + optionsarray[i] + '" ' + 'type="' + item.fieldtype + '" value="' + optionsarray[i] + '" />'); 
         } 
         form.append('<label for="' + optionsarray[i] + '">' + optionsarray[i] + '</label>'); 
        } 
        form.append('</fieldset>' + '</div>'); 
       } else { 
        inputType = 'text'; 
        form.append('<div data-role="fieldcontain">' + '<label for="' + item.fieldname + '">' + item.fieldlabel + '</label>' + '<input name="' + item.fieldname + '" id="' + item.fieldname + '" ' + 'type="' + item.fieldtype + '" value="' + item.fieldvalue + '" />' + '</div>'); 
       } 
      }); 
      var thinghdr = $("#thingheader"); 
      thinghdr.html = ""; 
      $(data.thingdetails).each(function (index) { 
       thinghdr.append("<h3>" + this.thingoper + " " + this.thingnumber + " " + this.thingdesc + "</h3>"); 
      }); 

      $("#editthing").page("destroy").page(); 
     } 
    }); 
}); 

フィールドを動的に追加されているためですが、私はそれラウンドを取得する方法がわかりません。事前 で

おかげでマイク

Answer 1

あなたはこの過去を移動しているかもしれませんが、私は要素を更新するjQueryの携帯方法はそれらを作成呼び出すことであることを見出しました。

$(".selector").append(elementToAppend).trigger("create"); 

この：多分それはこのようにそれにあなたは私があることに私の動的な要素を追加した後、私は（「作成」）、トリガーを呼び出すpage("destroy").page();

のintseadに興味がある行動を持っているのに役立ちますjQueryモバイルのドキュメントページhereからのものです。

新しいマークアップに

を強化ページのプラグインは、ほとんどのウィジェットが自動初期化そのものを使用するpageInitイベント、 を送出します。 ウィジェットプラグインスクリプトが参照されている限り、ページ上に見つかったウィジェットのインスタンスはすべて自動的に拡張されます。あなたは Ajaxを介してコンテンツに新しいマークアップクライアント側または負荷を生成し、ページに注入場合

しかし、あなたは 新しい内に含まれるすべてのプラグインの自動初期化を扱う に作成したイベントをトリガすることができますマークアップ。これは任意の要素（ページ div自体さえ）でトリガーされ、各プラグイン （リストビューボタン、選択など）を手動で初期化する作業を保存します。

のAjax経由で をロードされたHTMLマークアップ（たとえば、ログインフォーム）のブロック場合たとえば、自動的 にそれが含まれている すべてのウィジェット（この場合は、入力やボタン）を形質転換するために作成するイベントをトリガは、拡張バージョン。このシナリオのコードは次のようになります。

$（...ウィジェットを含む新しいマークアップ...）.appendTo（ ".ui-page" ）.trigger（ "create"）;