how to bind to both blur and change, but only trigger a function once in Jquery/Javascript?

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

don't know about ipad, but on browser maybe something like this

$("#dataTable tbody").on("click blur", "tr", function(event){
        if (event.type == "click")
        { 
        //do stuff
        }
        else
        {
        //do nothing
        }
});

Answer 2

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