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

Question

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

由于 Ipad 在 on('change') 上遇到问题，我还想绑定到 'blur'，这在 Ipad 上运行良好。

但是我不希望两个事件都触发该函数两次，所以我需要某种钩子来确保 change 和 blur 是否都触发，底层函数只触发一次。

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

// 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 的可触摸设备，则此方法有效。

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

感谢您的帮助！

Answer 1

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

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

function blurChange(e){
    clearTimeout(blurChange.timeout);
    blurChange.timeout = setTimeout(function(){
        // Your event code goes here.
    }, 100);
}

$('#my_select').on('blur change',blurChange);

Answer 2

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

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

Answer 3

这不是很好，但你可以在blur 函数中调用change，然后在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
    }
});

Answer 4

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

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

});

Answer 5

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

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

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

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

Answer 6

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

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