Search jQuery

jQuery Forum

jQuery Mobile

vpxavier

How to undelegate a change event... excute a function then delegate again the undelegated change event?

in jQuery Mobile • 10 years ago

Hello,

I'm sorry if my title is not very clear...

I have multiple items in a page.

Each item has a slider and a flip toggle switch that are displaying the item's value.

The slider and the flip toggle switch should display the same value.

This is OK when the pages loads but when the user

is changing the slider, the toggle switch should reflect the new value
is changing the toggle switch, the slider should reflect the new value.

The slider has a range from 0 to 100 and the toggle has 3 choices:

OFF (value = 0 on the slider)
a variable value between 0 and 100
ON (value = 100 OR means bigger than > 0 on the slider)

To do that, I'm using:

$("#myDiv").delegate("input, select","change",function(){
if ($(this).attr("type") == "range"){ // Changes the radiobuttons to reflect the slider's value when it has changed
var sliderID = this.id;
var sliderVal = $(this).val()
var currentRadioID = sliderID.replace('slider-','');
switch (sliderVal) {
case '0':
$("#"+currentRadioID+"-choice-1").attr("checked",true).checkboxradio("refresh");
$("#"+currentRadioID+"-choice-2").attr("checked",false).checkboxradio("refresh");
$("#"+currentRadioID+"-choice-3").attr("checked",false).checkboxradio("refresh");
break;
default:
$("#"+currentRadioID+"-choice-1").attr("checked",false).checkboxradio("refresh");
$("#"+currentRadioID+"-choice-2").attr("checked",false).checkboxradio("refresh");
$("#"+currentRadioID+"-choice-3").attr("checked",true).checkboxradio("refresh");
break;
}
}
if ($(this).attr("type") == "radio"){ // Changes the radiobuttons to reflect the slider's value when it has changed
var radioID = this.form.id;
var radioVal = $(this).val();
var currentSliderID = radioID.replace('form-','slider-');
$("#"+currentSliderID).val(radioVal).slider("refresh");
}
});

The problem is that when a user changes the slider, I have to change the radio's value to reflect the slider's new value and then a change event is detected and the entire step runs again... A kind of loop except that if the value is between 0 and 100, it will finally value 100 because the radio can only be changed automatically to 0 or to 100.

I guess I have to undelegate the change event before I change slider or the toggle switch and then delegate the change event again, with the entire code described before but how to do that without having to repeat the code endlessly?

Thanks a lot!

EDIT: I think the solution is to replace the "change" event by a mouse or touch event, but I can't find an event that works on both Google Chrome and an Android tablet...

Response title

Attachments

jQuery Forum

How to undelegate a change event... excute a function then delegate again the undelegated change event?

Statistics

Tags

Actions