如何绑定到模糊和更改，但在 Jquery/Javascript 中只触发一次函数

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

本文关键字：Javascript 函数 一次 Jquery 绑定 何绑定 模糊 但在      更新时间：2023-09-26

我正在尝试在更改选择元素时触发一个函数。

由于 iPad 在使用 on（'change'）时遇到问题，我也想绑定到"blur"，这在 iPad 上工作正常。

但是，我不希望两个事件都触发函数两次，所以我需要某种钩子来确保如果更改和模糊都触发，底层函数只触发一次。

这就是我现在正在做的事情，但是...不是很好：

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

如果您可以使用所有可触摸设备来使用模糊，则此方法有效。

问题：
有没有人有更好的主意来确保模糊和更改只触发一次功能？

感谢您的帮助！

尝试创建一个函数，绑定到两个事件，并添加超时来调用该函数。 这样，如果多次调用该函数，它将只运行一次。

像这样（如果需要，您可以调整超时）：

function blurChange(e){
    clearTimeout(blurChange.timeout);
    blurChange.timeout = setTimeout(function(){
        // Your event code goes here.
    }, 100);
}
$('#my_select').on('blur change',blurChange);
不知道

iPad，但在浏览器上可能是这样的 

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

这并不好，但你可以调用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");
});
它

看起来不太好，但我认为它应该有效。

编辑：如果浏览器启动两个事件（模糊和更改），此代码将调用两倍的change功能。我认为您可以使用某种标志来实现该行为：

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

附加多个事件，你也可以这样使用它

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

在两个事件始终被触发的情况下，我们可以为第一个触发器设置一个标志并运行脚本。第二个触发器将看到标志并将其清除，然后返回，以便它仅在第一次运行。

在这种情况下，您可以多次模糊而不进行更改，因此它只会每隔一段时间运行一次。如果有更改，那么它应该确定运行（无论标志是打开还是关闭）。

$(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);
}
  • 如果要在用户离开元素之前检测更改，则可以考虑"input"事件。
  • 您还可以考虑编写脚本，以便可以安全地运行多次（幂等），并且足够高效，即使运行两次也不会影响性能。

可以同时绑定到多个事件：

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