如何绑定到模糊和更改，但只在 Jquery/Javascript 中触发一次函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11346359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to bind to both blur and change, but only trigger a function once in Jquery/Javascript?
提问by frequent
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.
由于 Ipad 在 on('change') 上有问题，我也想绑定到 'blur'，这在 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 changeand blurtrigger, 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.
如果您可以使用所有使用blur 的可触摸设备，则此方法有效。
Question:
Does anyone have a better idea to make sure blur and change only trigger a function once?
问题：
有没有人有更好的主意来确保模糊和更改仅触发一次功能？
Thanks for help!
感谢帮助！
回答by Rocket Hazmat
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);
回答by max4ever
don't know about ipad, but on browser maybe something like this
不知道 ipad，但在浏览器上可能是这样的
$("#dataTable tbody").on("click blur", "tr", function(event){
if (event.type == "click")
{
//do stuff
}
else
{
//do nothing
}
});
回答by Vithozor
It's not nice, but you can call to changeinto the blurfunction, and do all the stuff in the changefunction:
这不是很好，但是您可以调用change该blur函数，并执行该函数中的所有操作change：
...
$(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 changefunctionality. I think that you can achieve that behavior with some kind of flag:
编辑：如果浏览器启动两个事件（模糊和更改），此代码将调用两次change功能。我认为你可以用某种标志来实现这种行为：
var executed = false;
...
$(document).on("change blur", "#yourelement", function(){
if(!executed){
executed = true;
//do your stuff
}
});
回答by Vivek
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("");
}
});
回答by Frank Forte
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.
- 如果您想在用户离开元素之前检测更改，您可以考虑“输入”事件。
- 您还可以考虑编写脚本，以便它可以安全地运行多次（幂等）并且足够高效，即使它运行两次也不会影响性能。
回答by bokonic
You can bind to multiple events at the same time:
您可以同时绑定到多个事件：
$(document).on('blur change','#mySelector',function(){
// this is called on either
});
