JQuery Mobile collapsible with radio buttons

Question

I try to create an alternative way to choose along a set of options, like in a select widget.

My custom select is built with a collapsible and a set of radio buttons, which are somewhat lighter than JQM select, since non-native selectmenu is converted into a popup or dialog. especially when used inside a panel, and moreover it is for me easier to data-bind.

I'm dynamically iniecting markup into the panel inner. The panel can also have different content that will be initialized in panel.onbeforeopen. Now, i have some trouble to bind the radio buttons change event only after the collapsible gets created. I tried something like this but don't works:

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

How can i bind the radio button change event at the right time, after the accordion has been initialized? Is there a way also to bind the change event for the whole radio group instead to each single radio buttons?

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

Answer 1

Use the pagecreate event of the page to add the change handler, and use the name attribute to add only one 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" );
  });
});  

Updated Plunker