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

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中的第一个模糊。 当我在歌剧，mozilla和边缘尝试它时，它在第一次尝试时没有奏效。

当我在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或类将事件绑定到它们时，后续事件不起作用。 以下解决方案应该可以帮助您：

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

此外，使用-在IDS是不是一个好方法。 相反，要么坚持使用camelCase ，要么遵循命名约定的underscore_format 。