模糊事件不会在第一次尝试时触发

Question

我正在尝试根据在文本框中输入的值更新 DOM。

HTML:

<input id="event-name" type="text"/>

JQUERY:

$('#event-name').on('blur',function(){
  $.post("scripts/add-team-support.php",{eventName : eventName},function(minAndMaxString){
  //my code here
  });
});

这适用于 Chrome 中的第一个模糊。当我在 Opera、Mozilla 和 Edge 中尝试它时，它在第一次尝试时不起作用。

当我在 jquery 之前添加它时它起作用了。

$("#event-name").focus();
$("#event-name").blur();
$("#event-name").focus();

我这样做是为了在页面打开时进行第一个 $.post 调用。

为什么会出现这个问题？如何以适当的方式解决这个问题？请帮忙！

Answer 1

您可以试试这个代码：

var lazyTriggerEvent = function(id,event,callback){
    var searchTrigger=null;
    $("#"+id).bind(event,function(){
        var text = $.trim($(this).val());
        clearTimeout(searchTrigger);
        searchTrigger = setTimeout(function(){
            callback(text);
        },500);
      })
   };
//use keyup event
lazyTriggerEvent("event-name","keyup",function(){})

Answer 2

当通过 ID 或 class 将事件绑定到它们时，跨浏览器的元素经常会发生后续事件不起作用的情况。以下解决方案应该对您有所帮助：

$(document).on('blur','#event-name', function(){
  $.post("scripts/add-team-support.php",{eventName : eventName},function(minAndMaxString){
  //my code here
  });
});

或者，您可以使用 keyup 事件。您可以执行以下操作：

$(document).on('keyup','#event-name', function(){
  var eventName = $(this).val();
  $.post("scripts/add-team-support.php",{eventName : eventName},function(minAndMaxString){
  //my code here
  });
});

此外，在 ID 中使用 - 也不是一个好方法。相反，要么坚持 camelCase 或 underscore_format 命名约定。

模糊事件不会在第一次尝试时触发

blur event doesn't trigger at first attempt

html

javascript

php

jquery

.post