Событие blur не запускается при первой попытке

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. Когда я пробовал это в опере, мозилле и краю, это не сработало с первой попытки.

Это сработало, когда я добавил это перед jquery.

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

Я сделал это, чтобы первый вызов $ .post возникал при открытии страницы.

Почему эта проблема происходит? Как решить это правильно? Пожалуйста, помогите!

Answer 1

Это часто случается с элементами во всех браузерах, что последующие события не работают при привязке события к ним через 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 
    }); 
}); 

Кроме того, с помощью - в идентификаторах не хороший подход. Скорее, либо придерживайтесь camelCase, либо underscore_format соглашения об именах.

Answer 2

Вы можете попробовать этот код:

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(){})