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

问题

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!

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

回答2:

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

回答3:

It's not nice, but you can call to change into the blur function, and do all the stuff in the change function:

...
$(document).on("change", "#yourelement", function(){
    //do your stuff
});
....
$(document).on("blur", "#yourelement", function(){
    $("#yourelement").change();
    //alternatively, you can trigger the change event
    //$("#yourelement").trigger("change");
});

It doesn't look nice, but I think it should work.

EDIT: If the browser launches both events (blur and change), this code will call twice the change functionality. I think that you can achieve that behavior with some kind of flag:

var executed = false;
...
$(document).on("change blur", "#yourelement", function(){
    if(!executed){
        executed = true;
        //do your stuff
    }
});

回答4:

Attach multiple events you can use it like this also

<select class="form-control" id="Category" name="Category" required>
   <option value="">Choose an option</option> 
   <option value="1">Your Text</option> 
</select>
<p class=""></p>

$( "#Category" ).on( "blur change", function( event ) {
    if($(this).val()===""){
            $(this).next().text("Please choose category").css("color","#a94442");
        }
        else
        {
            $(this).next().text("");
        }

});

回答5:

In the case that both events are always triggered, we can set a flag for the first trigger and run the script. The second trigger will see the flag and clear it, and return so it only runs the first time.

In this case, you can blur multiple times without making a change, so it will only run every other time. If there is a change, then it should run for sure (whether the flag is on or off).

$(document).on("change blur",".selector", function(){

    if($(this).data("triggered") == "1"){
        $(this).data("triggered","0");
        return;
    }
    $(this).data("triggered","1");

    // your script here

    // fix for "every other time" issue described above
    var el = $(this);
    setTimeout(function(){ el.data("triggered","0"); }, 200);
}

You might consider the "input" event, if you want to detect a change before the user leaves the element.
You might also consider writing the script so that it is safe to run multiple times (idempotent) and efficient enough that it doesn't affect performance if it runs twice.

回答6:

You can bind to multiple events at the same time:

$(document).on('blur change','#mySelector',function(){
    // this is called on either
});

来源：https://stackoverflow.com/questions/11346359/how-to-bind-to-both-blur-and-change-but-only-trigger-a-function-once-in-jquery

标签

javascript

jquery

events

jquery-mobile