функция toggleClass не работает в этой функции

Question

У меня есть эта проблема, так как заголовок говорит, что я не понимаю, почему toggleClass () не работает, вместо этого, если я использую removeClass () или addClass (), все работает отлично.

$('div').on('click', '.fa-exclamation-circle', function(){
      var target = $(this).parent().find('p');
      target.toggleClass("hidden");
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center items-center w-full mb-10 relative">
            <i class="fas fa-unlock w-1/12"></i>
            <input class="transparence-input w-3/4 radius p-1 px-10 relative" type="password" name="password" value="" placeholder="Password" data-parsley-required="true" data-parsley-trigger="focus keyup" data-parsley-required-message="Campo obbligatorio">
            <div class="error-field-icon flex hidden">
              <i class="fas fa-exclamation-circle text-red-800"></i>
              <p class="div-error px-1 absolute text-white lg:text-sm radius h-auto hidden"></p>
            </div>
          </div>

Answer 1

Проблема заключается в том, что вы используете div в качестве основного селектора для делегированного обработчика событий, и в DOM есть несколько вложенных div элементов. Поэтому обработчик click запускается один раз для каждого родительского элемента div для элемента .fa-exclamation-circle, по которому щелкнули. Поскольку в приведенном примере их два, первый вызов toggleClass() удаляет класс, второй добавляет его снова.

Чтобы решить эту проблему, сделайте первичный селектор более конкретным c, чтобы только один родительский div выбрано:

$('div.items-center').on('click', '.fa-exclamation-circle', function() {
  var target = $(this).parent().find('p');
  target.toggleClass("hidden");
});

.hidden { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center items-center w-full mb-10 relative">
  <i class="fas fa-unlock w-1/12"></i>
  <input class="transparence-input w-3/4 radius p-1 px-10 relative" type="password" name="password" value="" placeholder="Password" data-parsley-required="true" data-parsley-trigger="focus keyup" data-parsley-required-message="Campo obbligatorio">
  <div class="error-field-icon flex">
    <i class="fas fa-exclamation-circle text-red-800">Click me</i>
    <p class="div-error px-1 absolute text-white lg:text-sm radius h-auto hidden">Foo bar!</p>
  </div>
</div>