17

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

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

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

感谢帮助！

4

6 回答 6

29

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

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

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

$('#my_select').on('blur change',blurChange);
于 2012-07-05T14:43:08.503 回答
4

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

$("#dataTable tbody").on("click blur", "tr", function(event){
        if (event.type == "click")
        { 
        //do stuff
        }
        else
        {
        //do nothing
        }
});
于 2012-07-05T14:30:13.800 回答
0

这不是很好，但您可以调用函数，并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
    }
});
于 2012-07-05T14:30:06.873 回答
0

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

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

});
于 2017-09-26T11:15:57.740 回答
0

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

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

$(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);
}
  • 如果您想在用户离开元素之前检测到更改，您可以考虑“输入”事件。
  • 您还可以考虑编写脚本，以便多次运行是安全的（幂等）并且足够高效，即使运行两次也不会影响性能。
于 2018-12-13T19:23:21.230 回答
-4

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

$(document).on('blur change','#mySelector',function(){
    // this is called on either
});
于 2012-07-05T14:37:17.537 回答