Add toggle button dynamically in jquery mobile

Question

I want to add a toggle button dynamically. The toggle button will look like in Flip toggle switch Example. I tried like that but i get a different output like data-role="slider" is not working. the code

$('button').click( function() {
   var element  =  $ ('#test');
    var toggle_button = '<select data-role="slider"><option value="off">Off</option><option value="on">On</option></select>';
    element.append(toggle_button);
});

My JsFiddle is : http://jsfiddle.net/4Fk9L/1/

What I do wrong here?

I think you'll have to call the $('select').slider(); because you are adding it after the DOM is ready — EricG
– EricG, Commented Dec 3, 2012 at 10:19

bipen · Accepted Answer · 2012-12-03 10:21:04Z

1

call the switch function after the element is appended..

 $('button').click( function() {
    var element  =  $ ('#test');
    var toggle_button = '<select data-role="slider"><option value="off">Off</option>   <option value="on">On</option></select>';
    element.append(toggle_button);
    $('select').slider();  //call plugin function here
});

here is the fiddle

http://jsfiddle.net/4Fk9L/2/

answered Dec 3, 2012 at 10:21

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EricG Over a year ago

I was first ;) jsfiddle.net/4Fk9L/1 haha (note the /1) lol i have no idea why im telling xD

Collectives™ on Stack Overflow

Add toggle button dynamically in jquery mobile

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related