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 개뿐) 참조를 저장하려고 시도한 다음 다시 첨부하려고했습니다.

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"); 
} 

나는 또한 새로운 마크 업이 renderSetingsShowsList의 마지막 줄에 (장소에 있지만, 그 어떤 영향을 미칠 것 같지 않습니다 후 $("#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'); 

    }); 
}