Огонь события javascript в форме с динамически добавленным классом с использованием jQuery

Question

У меня есть следующая форма:

<form class="edit">
</form>

Когда нажата кнопка редактирования, добавьте в форму «активный» класс, например:

<form class="edit active">
</form>

Я хочу проверитькогда пользователь вносит изменения в любую из форм ввода. Следующие работы:

$('.edit').on('change', function () {
    console.log('works');
});

Но я хотел бы ограничить событие, когда форма активна. Я пробовал следующее, но оно не срабатывает:

$('.edit.active').on('change', function () {
    console.log('fails');
});

$('.edit').on('change', '.active', function () {
    console.log('fails');
});

Нужно ли делать что-то другое для проверки динамически добавляемых классов?

Answer 1

Фильтрация уже выбранных элементов с использованием метода filter():

$('.edit').filter('.active').on('change', function () {
    console.log('works');
});

Примечание:
Это должно быть включено внутри в зависимости от того, какой обработчик событий динамически добавляет класс active. Например, обработчик события нажатия кнопки.

Answer 2

Вы можете использовать документ для динамического добавления на страницу:

$ (документ) .on (события, селектор, данные, обработчик);

$(document).on('change','.edit.active', function () {
    console.log('fails');
});

Answer 3

• Если активный класс не добавлен к вашему элементу во время выполнения, этот код должен работать:

$('.edit.active').on('change', function() {
  alert('active changed');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form id="form" class="edit active">
    <input type="text" name="test" id="test">

    <input type="submit" value="sumbit">
  </form>
</div>

<button id="testbtn">
Click me
</button>

• Если ваш «активный» класс добавляется в документ во время выполнения чем-то вроде jQuery, поэтому вы должны проверить этот класс по условию, подобному этому:

$('#activateBtn').on('click', function(){
   $('.edit').toggleClass('active');
})

$('.edit').on('change', function () {
     if ($(this).hasClass('active')) {
        alert('active changed');
     }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form id="form" class="edit">
  <input type="text" name="test" id="test">
  
  <input type="submit" value="sumbit">
  </form>
</div>

<button id="activateBtn">
Click To Active Form
</button>

Проверьте это, пожалуйста.

Answer 4

Есть много способов сделать это:

Вы можете выполнить if condition и использовать .hasClass для проверки, например так:

$('.edit').on('change', function () {
   if ($(this).hasClass("active")) {
       console.log('Active');
   } else {
       console.log('Not Active');
   } 
});

Также вы можете написать другойсинтаксис такой, но здесь вы не зависите от edit class

$('.active').on('change', function () {
     console.log('Active');
});

Другой способ:

$('form.active').on('change', function () {
     console.log('Active');
});

Более конкретный способ:

$('form[class="edit active"]').on('change', function () {
     console.log('Active');
});

Кстати, если вы добавите класс active динамически, это действие change не вступит в силу, вы должны написать свой код следующим образом:

$(document).on("change",".active",function(){
      console.log('Active');
}); 

Вы можете применить это ко всем вышеуказанным методам.

Answer 5

Как насчет оператора if, проверяющего, существует ли «активный» класс. Может быть, это была бы хорошая идея.

Что-то вроде:

$('.edit').on('change', function () {
    if ($YourEditFormElement).hasClass('active')) {
        console.log('It works!');
    }
 });

Дайте ему шанс

Answer 6

$('.edit').on('change', function () {
    if ($(this).hasClass('active')) {
        console.log('works');
    }
 });