Как запустить событие, только если флипчитч переключен вручную

Question

Я создал JQuery Mobile Flipswitch, как это

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

и я слушаю изменения на этом переключателе

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

Но я не хочу, чтобы событие срабатывало, если я изменил значение переключателя на

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

Как проверить, изменился ли флип-переключатель, напрямую с ним или установив значение и обновив флип-переключатель?

Я создал пример нежелательного поведения под этим JSFiddle.

Answer 1

Вам нужно использовать .on() приложить change событие и .off() удалить его - перед тем, как связать снова - всякий раз, когда вы меняете значение динамически.

Оберните весь ваш код в pagecreate событие, это эквивалентно .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);
    });
});

демонстрация