jquery-mobile - JQuery Mobile 可折叠单选按钮

Question

我尝试创建一种替代方式来选择一组选项，例如在选择小部件中。

我的自定义选择是用一个可折叠的和一组单选按钮构建的，它们比 JQM 选择要轻一些，因为非本地选择菜单被转换为弹出窗口或对话框。特别是在面板内使用时，而且对我来说更容易进行数据绑定。

我动态地将标记插入到面板内部。面板也可以有不同的内容，这些内容将在 panel.onbeforeopen 中初始化。现在，我只有在创建可折叠项后才能绑定单选按钮更改事件。我尝试过这样的事情但不起作用：

$("#collapsible-select").on("collapsiblecreate", function(event, ui) {
  $("#radio-choice-1").change(function() {
    var label = $("label[for='" + $(this).attr('id') + "']");
    $("#collapsible-select").collapsible("option", "collapseCueText", label);
    $("#collapsible-select").collapsible("collapse");
  });
});

在手风琴初始化后，如何在正确的时间绑定单选按钮更改事件？有没有办法将整个单选组的更改事件绑定到每个单选按钮？

新Plunker：http ://plnkr.co/edit/OSocuRPQIzuk367dE6XS?p=preview

Answer 1

使用页面的pagecreate事件添加change handler，使用name属性只添加一个handler：

$(document).on("pagecreate","#one", function(){ 
  $('[name="radio-choice"]').change(function(e) {
    var label = $(this).parent(".ui-radio").find("label").text();
    $("#collapsible-select").collapsible("option", "collapseCueText", label).collapsible( "collapse" );
  });
});  

更新的 Plunker