Question

I have a function that will change the value of a text box when a slider is used. It gets passed an event variable which has the textbox to update as a value:

function updateTextBox(e){
  $(e.data.textbox).val($(this).slider('option','value')); //this line works great
  $(e.data.textbox).change(); //this line works fine in Chrome, but not IE.
}

To bind the function I’m passing (simplified):

slinder.bind('slide', {textbox : '#idOftextbox'}, updateTextBox);

IE automatically does the change event with just the first line, but then throws an error on second line “Object doesn’t support this object or method”. However Chrome doesn’t automatically fire the change event by setting the value so needs the second line. Any ideas how I get around this without resorting to user agent detection.

alert(e.data.textbox.change); //gives me the definition of the function in all browsers but ie doesn’t like the addition of brackets.

I’ve even tried eval(e.data.textbox.change) without any luck…

Just to note. I’m happy with the way my slider is working and so am not looking to replace this. Just how the event gets “bubbled” to the textbox.

Answer 1

This was because I had two events binded to the slider, which i ommitted out of the question as I thought it was irrelevant.

slider.bind(‘slide’,….
slider.bind(‘slidechange’,…

Not sure why the error went away when I got rid of the e.textbox.change() line, but solved it by removing the second listener