Jquery class selector not working when perform addClass on new element

Question

I have the below problem when validate my form as below steps

1- 'required' validation added to input

<input type="text" 
   name="current_mileage_meter" 
   value="" 
   id="current_mileage_meter" 
   class="form-control 
   form-control-sm" 
   validation="required|decimal">

2- After click save button, validation function called and if the input is empty, I use input.addClass("is-invalid"); and the class added to this input correctly when inspect the input

<input type="text" 
    name="current_mileage_meter" 
    value="" id="current_mileage_meter" 
    class="form-control 
    form-control-sm is-invalid" 
    validation="required|decimal">

3- jQuery selector on keyup for 'is-invalid' added as below but it doesn't work on this input

$(".is-invalid").on('keyup', function() {
   $(this).removeClass("is-invalid");
})

note: When the input already have the class 'is-invalid' when load the page its work correctly.

jQuery version 3.6.0 also the same issue on 3.6.1

 $(".is-invalid").keyup( function() {
    $(this).removeClass("is-invalid");
})

also didn't work

Please add the HTML and related to clearly reproduce your challenge IN the question FWIW there IS a simple solution to this but to demonstrate properly please add the HTML that includes the element with the `is-valid` class AND the element that wraps that/parent element — Mark Schultheiss, Dec 07 '22 at 22:45
I hope [this](https://stackoverflow.com/a/8111171/128761) answer your question. — vee, Dec 07 '22 at 22:52
Understand about Event Delegation [by jQuery](https://learn.jquery.com/events/event-delegation/), [and](https://www.geeksforgeeks.org/event-delegation-in-javascript/) [other sites](https://javascript.info/event-delegation). — vee, Dec 07 '22 at 22:56
$(".form-group").on('keyup','.is-invalid', function() { $(this).removeClass("is-invalid") $("#"+$(this).attr('id')+"-invalid-feedback").remove(); }) — Osama Al-Theebah, Dec 07 '22 at 23:03

score 2 · Answer 1 · answered Dec 07 '22 at 23:07

You need to attach the event handler to the wrapper of the input. Here I use some terrible colors and css to illustrate - it starts out invalid and removes it then adds another class - just to show the transition. Sure ugly but should demonstrate the activity. Note I also show the delgateTarget and currentTarget - the wrapper and the element in play here. reference: https://api.jquery.com/category/events/event-object/

$('.input-container').on('keyup', '.is-invalid', function(event) {
  $(event.delegateTarget).addClass("showme");
  $(event.currentTarget).addClass('show-input');
  $(this).removeClass("is-invalid");
});

.is-invalid {
  background-color: #ffdddd;
  padding: 0.5rem;
}

.showme {
  border: solid 1px green;
  padding: 0.5rem;
}

.show-input {
  border: solid green 2px;
}

.show-input:focus {
  border: solid lime 2px;
  padding: 0.25rem;
  background-color: #ddffdd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-container">
  <input type="text" name="current_mileage_meter" value="" id="current_mileage_meter" class="form-control 
   form-control-sm" validation="required|decimal">

  <input type="text" name="current_mileage_meter" value="" id="current_mileage_meter" class="form-control 
    form-control-sm is-invalid" validation="required|decimal">
</div>

Jquery class selector not working when perform addClass on new element

1 Answers1