jquery mobile - dynamically add toggle switch

Question

Here is my Toggle Switch added dynamically

$('#item').append('<div data-role="fieldcontain"><label for="flip">Status : </label><select class="flip" name="slider" id="flip1" data-role="slider"><option value="false" selected="selected">Off</option><option value="true">On</option></select></div>')

My page have the event for change slider

$("#flip1").on("slidestart", function(event, ui) {
    alert('test');
});

but it does not work! can someone help me?

Answer 1

You need to use event delegation method, since they are created dynamically

$('#item').on("slidestart","#flip1", function(event, ui) {
    alert('test');
});