Question

我正在尝试在更改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
        })
    }

如果您可以使用所有使用模糊的可触摸设备，则此功能正常。

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

感谢您的帮助！

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

这不好，但您可以拨打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
    }
});

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

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

6 个答案: