jquery mobile + knockout hide issue

Question

I am stuck on this, I am trying to unhide / hide jquery mobile flip switches using knockout. When knockout action is applied the jquery mobile controls stopped working. Could you please help me on this

here is the code

target.formattedValue(target());
return target;

and jsFiddle where the third control would hide if female selected but when male selected again the control disabled and not working

http://jsfiddle.net/FU7Nq/45

Answer 1

San.

When inspecting the rendered DOM of the following element:

<div data-bind="if: isMale">...</div>

you can see that after the radio button is changed to female, then the entire rendered HTML of that DIV is removed. Then, when switching back to the male, the content of that DIV is rendered back, but is this means that events are still attached to those slider HTML elements? I'm not sure how the way jQuery mobile attached the events, but it seems to me that this is the problem, cause you are clicking on the slider, but no action is taken. You can workaround this by recreating the Slider again:

$("#select-ifmale").slider()

Eventually this can be a bug in jQuery mobile. Sorry for suggesting this as an answer, but I don't have enough points, just to comment on your question.