Неочевидное поведение обработчиков focusout

230

29 марта 2018, 10:33

Здравствуйте, у меня есть проблемный блок кода.

<script type="text/javascript">
$("#lgrao").focusout(function(){
  if($("#lgrao").val().length < 2 || $("#lgrao").val().length > 100){
     $("#failid_1").show();
  };
});
$("#lgrao_1").focusout(function(){
  if($("#lgrao_1").val().length < 2 || $("#lgrao_1").val().length > 100){
     $("#failid_2").show();
  };
});
</script>

Суть проблемы:

Когда срабатывает первый focusout, то после него срабатывает второй, если первый не срабатывает, то второй тоже. Из-за чего такое происходит?

Answer 1

Вангую, иначе из вопроса ничего не понятно:

$("#lgrao").focusout(function() { 
  let strLen = $(this).val().length; 
  $("#failid_1")[strLen < 2 || strLen > 100 ? 'show' : 'hide'](); 
}); 
$("#lgrao_1").focusout(function() { 
  let strLen = $(this).val().length; 
  $("#failid_2")[strLen < 2 || strLen > 100 ? 'show' : 'hide'](); 
});

#failid_1, 
#failid_2 { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input id="lgrao"> 
<div id="failid_1">failid_1</div> 
<input id="lgrao_1"> 
<div id="failid_2">failid_2</div>

Если у вас еще десяток подобных операций, то советую задуматься над какой-то одной общей для них callback-функции.