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

$(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。

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

2 个答案: