在jQuery Mobile中構建一個動態單選按鈕列表，但沒有得到任何點擊事件

我正在使用jQMobile 1.0，並從API返回的json數據動態地構建單選按鈕列表。在jQuery Mobile中構建一個動態單選按鈕列表，但沒有得到任何點擊事件

我已經能夠使他們出現（主要）由模板化字段集出來的內容，與由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"); 
}

我也試着運行$("#settings").page()後的新標記已到位（上renderSetingsShowsList的最後一行，但似乎沒有任何效果。

是否存在的制裁方法做我想做的事情讓我們jQuery Mobile做它的增強，或者我將不得不一起破解它omehow？

來源

2012-03-23 Adam Tuttle

這是我提出的那種「黑客」解決方案。它有效，但我很想知道是否有更好的方法。

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'); 

    }); 
}

來源

2012-03-23 13:32:22

在jQuery Mobile中構建一個動態單選按鈕列表，但沒有得到任何點擊事件

回答

相關問題