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);
});
});