Question

I’m trying to trigger a function when a select element is changed.

Since Ipad is having trouble with on(‘change’), I also want to bind to ‘blur’, which works fine on Ipad.

However I don’t want both events to trigger the function twice, so I need some kind of hook to make sure if both change and blur trigger, that the underlying function is only fired once.

This is what I’m doing now, but … not very nice:

// make sure binding is only assigned once
var compSel = $('#my_select');
if ( compSel.jqmData('bound') != true ){
    console.log("bound");
    compSel.jqmData('bound', true)
        .on( $.support.touch ? 'blur' : 'change', function(){
            console.log("trigger");
            // run function xyz
        })
    }               

This works if you can live with all touchable devices making do with blur.

Question:
Does anyone have a better idea to make sure blur and change only trigger a function once?

Thanks for help!

Answer 1

Try creating a function, bound to both events, and adding a timeout to call the function. This way, if the function is called multiple times, it will only run once.

Something like this (you can adjust the timeout if needed):

function blurChange(e){
    clearTimeout(blurChange.timeout);
    blurChange.timeout = setTimeout(function(){
        // Your event code goes here.
    }, 100);
}

$('#my_select').on('blur change',blurChange);