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

我试图在select元素更改时触发一个函数

由于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
        })
    }               

如果你能与所有可触摸设备一起使用blur，这一点就行了

问题：
有没有人有更好的办法确保模糊和更改只触发一次函数

---

谢谢你的帮助

这不太好，但是您可以调用

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

---

我不知道ipad，但在浏览器上可能是这样的

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

---

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

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

---

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

类似这样的内容（如果需要，可以调整超时）：

---

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

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

});

选择一个选项
你的文字

$（“#类别”）。关于（“模糊变化”，函数（事件）{
if（$（this）.val（）=“”）{
$（this）.next（）.text（“请选择类别”）.css（“颜色”、“a94442”）；
}
其他的
{
$（this.next（）.text（“”）；
}
});

如果始终触发两个事件，我们可以为第一个触发器设置标志并运行脚本。第二个触发器将看到该标志并清除它，然后返回，因此它只会第一次运行

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

<> LI>如果您想在用户离开元素之前检测到更改，可以考虑“输入”事件。 <> LI>您也可以考虑编写脚本，以便安全运行多次（幂等），并且效率足够高，如果运行两次就不会影响性能。

---

IMO，如果执行此更改，仍然可以调用blur，因为仍然声明了on更改。更改可以由自身和模糊功能触发。耶。还有我正在采取的方法。谢谢如果该操作打开了一个新页面，当用户返回到原始页面时，超时时间将过去，通过单击该页面，他将触发模糊事件。但是如果您同时更改了元素并模糊了元素，则两者都将触发，并且该功能将运行两次，这通常不是您想要的。

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