jQuery/Ajax/Класс: removeClass (), затем addClass() работает не так, как планировалось внутри функции ajax

#jquery #ajax #function #class #button

Вопрос:

У меня есть две функции ajax, которые используют одну и ту же кнопку. Мое намерение находится в моем save_button классе, add_group есть ли оно по умолчанию, но то, что я хочу сделать, это когда моя кнопка редактирования будет нажата, add_group будет удалена и заменена, update_group чтобы использовалась другая функция ajax

Кнопка Сохранить:

 <button type="submit" class="save_button add_group">Save</button>

Кнопка Редактирования:

 <button type="button" class="edit_group">Edit</button>

Аякс:

 $(document).on('click', '.add_group', function(e) { 
  e.preventDefault(); 
 (additional content) });

$(document).on('click', '.update_group', function(e) { 
  e.preventDefault(); 
  (additional content )});

Что я пытался:

 $(document).on('click', '.edit_group', function(e) {
  e.preventDefault(); 
  $(".save_button").removeClass("add_group").addClass("update_group"); });

Эта функция, похоже, не работает, кнопка сохранения не запускает добавление или обновление, если я использую эту функцию. прошу любого совета о том, как это исправить.

(Цель: триггер removeClass и addClass при нажатии кнопки edit_button)

1. Что вы подразумеваете под «кажется, не работает» ?

2. Кажется, здесь все работает нормально ~ jsfiddle.net/jdr9f05t

3. Без описания проблемы этот вопрос, скорее всего, будет закрыт. Ваш код не работает, и если да, то что происходит, какие-либо ошибки?

Ответ №1:

 $(document).on('click', //....

Это действительно плохой выбор для съемки событий. Для этого требуется, чтобы событие проходило по каждому родительскому элементу документа. Это происходит медленно и может вызвать у вас сильную головную боль, если у вас есть какие-либо родительские элементы, которые захватывают элементы (потому что они также могут отменить прерывание события). Ниже я продемонстрирую лучшее решение.

В соответствии с документацией jQuery .on()

Большинство событий браузера всплывают или распространяются от самого глубокого, внутреннего элемента (цели события) в документе, где они происходят вплоть до тела и элемента документа. В Internet Explorer 8 и ниже некоторые события, такие как изменение и отправка, изначально не всплывают, но jQuery исправляет их, чтобы они всплывали и создавали согласованное поведение в разных браузерах.

Изменение того, что делает кнопка с помощью классов/привязок, также является плохим выбором, потому что гораздо сложнее отслеживать состояние самого объекта, когда он не является контейнером происходящего.

Я бы настоятельно рекомендовал прочитать книгу Филиппа Уолтона (Инженер @ Google) — Разделение вашего HTML, CSS и JavaScript.

 $(".js-edit-button").on('click', function(e) {
  $(this).closest('.form')
    .removeClass('is-add')
    .addClass('is-update');
});
 
$(".js-save-button").on('click', function(e) {
  var $lastAcion = $(this).closest('.form')
    .find('.form-save-last-action-type');

  if ($(this).closest('.form').is('.is-add')) {
    $lastAcion.text('Add');
  }

  if ($(this).closest('.form').is('.is-update')) {
    $lastAcion.text('Update');
  }
});

 .form.is-add .is-update {
  display: none;
}

.form.is-update .is-add {
  display: none;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form is-add">
  <div class="is-add">Form is in Add Mode</div>
  <div class="is-update">Form is in Update Mode</div>
  
  <button type="button" class="js-save-button">Save</button>
  <button type="button" class="js-edit-button">Edit</button>
  <div class="form-save-last-action-type">None</div>
</div>