Slider toggle switch inside JQuery Collabsible

Question

I'm trying to place a jQuery toggle switch (slider) inside a collapsible. The button appears inside the collapsible as intended but I can't get its state in my JavaScript code. It seems like the switch is invisible for my JS code. This is what I'm up to:

HTML:

<div data-role="fieldcontain">
                   <label for="flipmin">Switch:</label>
                   <select id="switch" data-role="slider">
                                 <option value="0">Off</option>
                                 <option value="1">On</option>
                   </select>
        </div>

JavaScript:

$(document).on('pageinit','#page1',function(){
$("#lightswitch").change(function() {
    var args = $("#lightswitch option:selected").val();
    console.log(args);
}); });

Any advice? Thanks!

Answer 1

uhmm this did it:

$(document).ready(function(){
 console.log("asd");
$(".fieldcontainer").change(function() {
    var args = $(".fieldcontainer option:selected").val();
    console.log(args);
}); });

<div data-role="fieldcontain" class="fieldcontainer">
                   <label for="flipmin">Switch:</label>
                   <select id="switch" data-role="slider">
                                 <option value="0">Off</option>
                                 <option value="1">On</option>
                   </select>
        </div>

never seen something like

$(document).on('pageinit','#page1',function()

so far, what is that doing?