Come unico evento incendio se flipswitch è acceso manualmente

Question

Ho creato un jQuery Mobile flipswitch come questo

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

e ascolto modifiche su questa flipswitch

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

ma non lo faccio desidera che l'evento deve essere attivato se cambio il valore del flipswitch da

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

Come posso controllare se un flipswit ch è cambiato interagendo con esso direttamente o impostando un valore e rinfrescando il flipswitch?

Ho creato un esempio del comportamento indesiderato in this JSFiddle.

Answer 1

è necessario utilizzare .on() per fissare change evento e .off() per rimuoverlo - prima di associare di nuovo - ogni volta che si cambia il valore in modo dinamico.

Avvolgere tutto il codice in pagecreate evento, è equivante a .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