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

【问题标题】：blur event doesn't trigger at first attempt模糊事件在第一次尝试时不会触发
【发布时间】：2016-09-04 08:20:14
【问题描述】：

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

HTML：

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

查询：

$('#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 调用。

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

【问题讨论】：

尝试keyup事件
keyup、keydown、keypress 产生了同样的问题。我也试过了。
blur 事件是一个有点奇怪的选择。为什么不听change 几乎意思相同的事件呢？
现在试过了。它没有用。

标签： javascript php jquery html .post

【解决方案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(){})

【讨论】：

【解决方案2】：

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

$(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 的命名约定。

【讨论】：

模糊事件不起作用，但 keyup 事件起作用，因为它在我输入第一个字母时进行了第一次调用。我会用这个。我在代码中将模糊更改为 keyup。
太棒了！另外，请确保您处理诸如“退格”之类的键的事件，在这种情况下，您已经拥有数据！另外，如果答案对您有帮助，请将其标记为已接受答案！
我会注意的。