Поправить работу функции по событию change jquery

386

18 июля 2017, 19:33

У меня есть input, в который нужно ввести число.

     <div class="col-xs-6">
         <div id="allDebt" class="form-group">
               <label class="control-label" for="sumOfDebet">Сумма всей задолженности</label>
               <input name="sumOfDebet" class="form-control" id="sumOfDebet" type="text" required placeholder="Сумма всей задолженности">
                   <div class="error-box"></div>
         </div>
     </div>

И есть функция, в которой имеется условие: если значение input < 300000, то нужно выводить сообщение "Процедура банкротства не может быть введена в отношении данного лица"

if (data.sumOfDebet <= 300000) {
            $('#allDebt').html('<div id="has-error" class="form-group has-error">' + '<label class="control-label" for="inputError1">' +
                'Процедура банкротства не может быть введена в отношении данного лица</label>' +
                ' <input type="text" class="form-control" id="inputError1">' + '</div>');
            return;
        }

Проблема в том, что если после этого сообщения попытаться ввести другое число в этот input, то функция заново не начинает работать. (Вызывается она по событию change).

Как это можно поправить?

Answer 1

Потому что ты меняешь целый блок вместо того что бы обнулить значение input и просто менять текст label. и у тебя меняется id инпута.

Если тебе важно менять id то можно сделать захват события того input-а примерно так:

$(document).ready(function(){ 
  $('.sumOfDebet').on('change',function(){ 
    if ($(this).val() <= 300000) { 
            $('#allDebt>label').text('Процедура банкротства не может быть введена в отношении данного лица'); 
            $(this).attr('id','inputError1') 
                console.log('Сработало'); 
            return; 
        } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="col-xs-6"> 
         <div id="allDebt" class="form-group"> 
               <label class="control-label" for="sumOfDebet">Сумма всей задолженности</label> 
               <input name="sumOfDebet" class="form-control sumOfDebet" id="sumOfDebet" type="text" required placeholder="Сумма всей задолженности"> 
                   <div class="error-box"></div> 
         </div> 
     </div>

Это пример реализации, так что бы событие работало всегда, но не полный пример того кода что вам нужно, поскольку в вопросе не отражалось весь ваш функционал, но кусок кода вы можете перенести и добавить в ваш код.