Building a dynamic radio button list in jQuery Mobile, but not getting any click events?

This is the sort of "hack" solution I've come up with. It works, but I'd love to know if there's a better way.

Up vote 0 down vote favorite share g+ share fb share tw.

I'm using jQMobile 1.0, and building a list of radio buttons dynamically from json data returned from an API. I've been able to make them appear (mostly) as expected by templating the contents of the fieldset out, with the same markup that is generated by jqMobile from static labels and radio buttons: And here's the code that's using the template and updating the page content: renderSettingsShowsList: function ( data ) { $("#showChooser") .empty() . Append('Which show are you attending?

'); $("#shows-list") . Tmpl( data ) . AppendTo("#showChooser .

Ui-controlgroup-controls"); } With the exception of losing the rounded corners, the list appears as if it were generated normally, but the remaining problem is that nothing at all seems to happen on click. Normally I would expect to see the radio button selected and the label background color would change for more visual feedback on selection. I've tried looking at the event handlers associated with the label, and there is a click handler directly on the label (as well as 2 bound to document), so I tried to save a reference to it and then re-attach it: renderSettingsShowsList: function ( data ) { //save reference to existing click handler so we can re-apply it var clk = $("#showChooser label:first").

Data("events"). Click0. Handler; $("#showChooser").empty().

Append('Which show are you attending? '); var newContent = $("#shows-list"). Tmpl( data ).

Find("label"). Each(function(){ $(this). Click(clk); }); newContent.

AppendTo("#showChooser . Ui-controlgroup-controls"); } I've also tried running $("#settings").page() after the new markup is in place (on the last line of renderSetingsShowsList, but that doesn't seem to have any effect. Is there a sanctioned method of doing what I'm trying to do that let's jQuery Mobile do its enhancements, or am I going to have to hack it together somehow?

Jquery-mobile link|improve this question asked Mar 23 at 13:30Adam Tuttle6,25242654 87% accept rate.

This is the sort of "hack" solution I've come up with. It works, but I'd love to know if there's a better way. RenderSettingsShowsList: function ( data ) { $("#showChooser") .empty() .

Append('Which show are you attending? '); $("#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'); }); }.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.