I've created an jQuery Mobile flipswitch like this

<select id="flip" data-role="flipswitch">
    <option value="animal">Lion</option>
    <option value="flower">Rose</option>
</select>

and I listen to changes on this flipswitch

$( document ).on( 'change', '#flip', function( e ) {
   console.log( 'changed' );
}

But I don't want the event to be triggered if I change the value of the flipswitch by

$( '#flip' ).val( 'flower' ).flipswitch( 'refresh' );

How do I check if a flipswitch has changed by interacting with it directly or setting a value and refreshing the flipswitch?

I've created an example of the unwanted behavior under this JSFiddle.

I've created an jQuery Mobile flipswitch like this

<select id="flip" data-role="flipswitch">
    <option value="animal">Lion</option>
    <option value="flower">Rose</option>
</select>

and I listen to changes on this flipswitch

$( document ).on( 'change', '#flip', function( e ) {
   console.log( 'changed' );
}

But I don't want the event to be triggered if I change the value of the flipswitch by

$( '#flip' ).val( 'flower' ).flipswitch( 'refresh' );

How do I check if a flipswitch has changed by interacting with it directly or setting a value and refreshing the flipswitch?

I've created an example of the unwanted behavior under this JSFiddle.

• javascript
• jquery
• jquery-mobile
• event-handling
• jquery-mobile-flipswitch

• 4 check this jsfiddle/Palestinian/ZPTPL – Omar Commented Apr 1, 2014 at 12:30
• 1 that will work thank you for your quick answer – gaggi Commented Apr 1, 2014 at 13:50

1 Answer 1

You need to use .on() to attach change event and .off() to remove it - before you bind it again - whenever you change the value dynamically.

Wrap all your code in pagecreate event, it is equvilant to .ready().

$(document).on("pagecreate", "#main", function () {

    /* change event handler */
    function flipChanged(e) {
        var id = this.id,
            value = this.value;
        console.log(id + " has been changed! " + value);
    }

    /* add listener - this will be removed once other buttons are clicked */
    $("#flip").on("change", flipChanged);

    $('#setlion').on('vclick', function (e) {
        $("#flip")
            .off("change") /* remove previous listener */
            .val('animal') /* update value */
            .flipswitch('refresh') /* re-enhance switch */
            .on("change", flipChanged); /* add listener again */
    });

    $('#setrose').on('vclick', function (e) {
        $("#flip")
            .off("change")
            .val('flower')
            .flipswitch('refresh')
            .on("change", flipChanged);
    });
});

Demo