如果手动切换闪光灯，则只能触发事件 [英] How to only fire event if flipswitch is manually switched

问题描述

我已经创建了一个像这样的jQuery Mobile flipswitch

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>

我听这个flipswitch上的更改

and I listen to changes on this flipswitch

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

但是，如果我将flipswitch的值更改为

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

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

如何通过与其直接交互或设置值并刷新flipswitch来检查flipswitch是否已更改？

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

我在这个JSFiddle 。

推荐答案

您需要使用 .on（）附加更改事件和 .off（）以删除它 - 在再次绑定之前 - 每当更改值动态地。

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.

de pagecreate 事件，它相当于 .ready（）。

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

这篇关于如果手动切换闪光灯，则只能触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！