События jQuery не происходят после того, как я изменяю класс кнопки

Question

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

После изменения класса, при следующем нажатии этих кнопок ничего не происходит, даже если класс был изменен. Кто-нибудь может помочь мне? Я только начинаю изучать jQuery, поэтому не знаю много продвинутых механизмов.

 $(".showcontactbutton").click(function(){
    $("#contactform").show();
    //$(this).attr('class', 'hidecontactbutton');
    $(this).removeClass('showcontactbutton').addClass('hidecontactbutton');
    $(this).text("Hide Contact Form");
    //html("<button id='hidecontactbutton'>Hide Contact Form</button>");

});

$(".hidecontactbutton").click(function(){
    alert("Works:");
    $("#contactform").hide();
    //$(this).attr('id', 'showcontactbutton');
    $(this).removeClass('hidecontactbutton').addClass('showcontactbutton');
    $(this).text("Contact Us");
});

Answer 1

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

$(document).on("click", ".showcontactbutton" , function() {
    ...
]);

Для получения дополнительной информации ищите привязку к динамическим элементам.

Answer 2

Если <button> не имеет атрибута type, то по умолчанию он равен type='"submit". Это не очевидно, если сказать, что <button> не было в <form>, но если это было в <form>, то каждый щелчок инициировал бы поведение по умолчанию для события отправки:

• Соберите все значения всех элементов управления формы, которые имеют атрибут [name], вложенный в <form>.

• Отправляет все значения на сервер, указанный атрибутом action.

• Сброс <form>

Итак, добавьте type="button" к <button>

<button id='hidecontactbutton' type="button">...</button>

Что касается переключения состояния #contact, вы должны указать #id кнопки, а затем переключать классы. Вы хотели иметь классы на кнопке вместо #contact? $(this) относится к тому, что было нажато (в этом контексте это должна быть кнопка).

$('#hideShow').on('click', hideShow);

function hideShow(e) {
  if ($(this).hasClass('hide')) {
    $(this).removeClass('hide').addClass('show').text('Hide Contact Form');
    $('#contact').show();
  } else {
    $(this).removeClass('show').addClass('hide').text('Contact Us');
    $('#contact').hide();
  }
};

button {
  display: inline-block;
  width: 18ch;
  cursor: pointer;
}

#contact {
  display: none;
  width: fit-content;
}

[type=submit] {
  float: right
}

<button id='hideShow' class='hide' type='button'>Contact Us</button>
<form>
  <fieldset id='contact'>
    <legend>Contact Us</legend>
    <label for='email'>Email: </label><br>
    <input type='email'><br>
    <label for='email'>Comment: </label><br>
    <textarea></textarea><br>
    <button type='submit'>Send</button>
  </fieldset>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>