Числовое текстовое поле с помощью JQuery динамически

Question

У меня есть следующий код, чтобы сделать текстовое поле только числовым. Работает нормально.

$( ".numeric" ).keypress(function( evt ) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      evt.preventDefault();
    }
});

<input id="RollNo" type="text" class="numeric">

Но когда я попытался сделать текстовое поле числовым динамически в событии изменения поля со списком, это не сработало.

Ниже приведен обработчик события изменения поля со списком:

$("#ExamId").change(function(){
    var examName = $("#ExamId option:selected").text();
    if(examName == "O Level"){
        $("#RollNo").removeClass("numeric");            
    }
    else{
        $("#RollNo").addClass("numeric");
    }
});

Есть ли выход, чтобы это произошло?

Answer 1

События JQuery добавляются к DOM во время загрузки, поэтому независимо от того, добавляете вы или удаляете класс, события являются собственными для элемента.

Вы можете использовать unbind выпустить keypress событие.

function handleKeyPress(evt) {
  evt = (evt) ? evt : window.event;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode > 31 && (charCode < 48 || charCode > 57)){
        evt.preventDefault();
      }
}

$("#ExamId").change(function(){
    var examName = $("#ExamId option:selected").text();
    if (examName == "O Level"){
        $("#RollNo").unbind('keypress');
    }
    else {
        $('#RollNo').keypress(handleKeyPress);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="RollNo" type="text">

<select id="ExamId">
  <option value="">Select</option>
  <option value="O Level">O Level</option>
  <option value="1 Level">1 Level</option>
</select>