jQuery Mobileでダイナミックラジオボタンリストを作成しましたが、クリックイベントは発生していません

Question

私はjQMobile 1.0を使用しており、APIから返されたjsonデータからラジオボタンのリストを動的に作成しています。

私は静的ラベルやラジオボタンからjqMobileによって生成されるのと同じマークアップで、フィールドセットの内容をテンプレート化することにより、予想通り彼らは（主に）見えるようにすることができました：

<script id="shows-list" type="text/x-jquery-tmpl"> 
    <div class="ui-radio"> 
    <input type="radio" name="activeShow" id="activeShow${showID}" value="${showID}"> 
     <label for="activeShow2" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-radio-off"> 
      <span class="ui-btn-inner" aria-hidden="true"> 
       <span class="ui-btn-text"> 
        <h2>${showname}</h2> 
        <p>${opendate} &mdash; ${closedate}</p> 
       </span> 
       <span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span> 
      </span> 
     </label> 
    </div> 
</script> 

そして、ここでテンプレートを使用してページのコンテンツ更新のコードです：角丸を失うことを除いて

renderSettingsShowsList: function (data) { 
    $("#showChooser") 
     .empty() 
     .append('<div role="heading" class="ui-controlgroup-label"><h3>Which show are you attending?</h3></div><div class="ui-controlgroup-controls"></div>'); 
    $("#shows-list") 
     .tmpl(data) 
     .appendTo("#showChooser .ui-controlgroup-controls"); 
} 

は、それが正常に生成されたかのようにリストが表示されますが、残りの問題は、ものではありませんすべてはクリックで発生するようです。通常、ラジオボタンが選択されていることを期待しています。ラベルの背景色は、選択時に視覚的なフィードバックが増えるように変化します。

ラベルに関連付けられたlooking at the event handlersを試しましたが、ラベルに直接クリックハンドラが2つあり（ドキュメントにもバインドされています）、その参照を保存してから再接続しようとしました。新しいマークアップがrenderSetingsShowsListの最後の行に（所定の位置にあるが、それはどんな効果を持っていないようだ後

renderSettingsShowsList: function (data) { 
    //save reference to existing click handler so we can re-apply it 
    var clk = $("#showChooser label:first").data("events").click[0].handler; 

    $("#showChooser").empty().append('<div role="heading" class="ui-controlgroup-label"><h3>Which show are you attending?</h3></div><div class="ui-controlgroup-controls"></div>'); 

    var newContent = $("#shows-list").tmpl(data).find("label").each(function(){ 
     $(this).click(clk); 
    }); 

    newContent.appendTo("#showChooser .ui-controlgroup-controls"); 
} 

私も$("#settings").page()を実行しようとしました。

の認可方法はあります私がしようとしていることを実行することで、jQuery Mobileはその機能拡張を行うか、または一緒にハックする必要がありますどう？

Answer 1

これは私が思いついた "ハック"ソリューションの一種です。それは動作しますが、より良い方法があるかどうかを知りたいです。

renderSettingsShowsList: function (data) { 
    $("#showChooser") 
     .empty() 
     .append('<div role="heading" class="ui-controlgroup-label"><h3>Which show are you attending?</h3></div><div class="ui-controlgroup-controls"></div>'); 

    $("#shows-list").tmpl(data).appendTo("#showChooser .ui-controlgroup-controls"); 

    //assign click handler to new form controls to do everything we need it to 
    $('#showChooser input:radio').click(function(e) { 

     //mark all as not selected 
     $("#showChooser input:radio").prop('checked', false); 
     $("#showChooser label") 
      .attr('data-theme','c') 
      .removeClass('ui-btn-up-e') 
      .addClass('ui-radio-off') 
      .removeClass('ui-radio-on') 
      .find(".ui-icon") 
       .addClass('ui-icon-radio-off') 
       .removeClass('ui-icon-shadow') 
       .removeClass('ui-icon-radio-on'); 

     //style selected option 
     var radio = $(this), 
      label = radio.next(); 
     radio.prop('checked', true); 
     label.attr('data-theme','e') 
      .addClass('ui-btn-up-e') 
      .removeClass('ui-radio-off') 
      .addClass('ui-radio-on') 
      .find(".ui-icon") 
       .removeClass('ui-icon-radio-off') 
       .addClass('ui-icon-shadow') 
       .addClass('ui-icon-radio-on'); 

    }); 
}