模糊事件在第一次嘗試時不會觸發

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 。