Question

32

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

rated 0 times [ 39] [ 7] / answers: 1 / hits: 34021 / 12 Years ago, thu, july 5, 2012, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jayla

Add To Favorites

Follow

Total Points: 14

Total Questions: 96

Total Answers: 123

Location: Greenland

Member since Fri, Jul 31, 2020

4 Years ago

jayla questions

1 Typescript error Property 'value' does not exist on type 'HTMLElement', Property 'onclick' does not exist on type 'Element'

Wed, Apr 27, 22, 00:00, 2 Years ago

1 What is double question mark equal?

Wed, Feb 23, 22, 00:00, 2 Years ago

1 ReactJS onclick add or remove class to another element

Tue, Aug 18, 20, 00:00, 4 Years ago

1 Render text with HTML tags in page

Sun, Nov 17, 19, 00:00, 5 Years ago

1 How to use directive in more than one module in angular 2

Mon, Jun 24, 19, 00:00, 5 Years ago

View All

answered 12 Years ago gonzaloulyssess · Accepted Answer

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