how to fire an event when a toggle flip changes?

Question

I'm trying to do a very simple thing: with the jQuery Mobile 1.1.1 framework, I'd like to disable a field when a toggle flip is on "manual".

Here is the HTML:

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <label for="toggleswitch">                         
        </label>
        <select name="toggleswitch" id="toggleswitch" data-theme="b" data-role="slider">  
            <option value="off">gps</option>
            <option value="on">manual</option>
        </select>
    </fieldset>
</div>

and here is my JavaScript:

$('#toggleswitch').change(function(){
    console.log("toggle");
});

At the moment, I can't even see the "toggle" word in the console. I think the change method doesn't even fire, but this is what I found in the online examples.

EDIT - I copied here a wrong example: the code I actually tested has the same "toggleswitch" id. The code is now edited the way I have it on my notepad++.

Answer 1

Did you put the code in the dom ready callback?

$(function() {
   $('#toggleswitch').change(function(){ console.log("toggle"); });  
});

PS: If you use id selector, no need to specify the element type.

Edit:

Also note you are using toggleswitch3 in the html as id, while using toggleswitch in the javascript.

Answer 2

Your id on the select element is toggleswitch3 , but in the JavaScript code you use toggleswitch . The names need to match in HTML and JavaScript, otherwise it can't work.