Почему jQuery RemoveClass для кнопки по-прежнему хорошо работать после AJAX?

Question

my html

<span class="input-group-text">    
  <button type="button" class="btn btn-outline-danger btn-sm owner_button owner_check" name="owner_check" >
    <i class="far fa-check-circle"></i>
  </button>
</span>

мой javascript

$(".owner_check").click(function(e){
  e.preventDefault(); 
  $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function($get) {
      $('.owner_button').removeClass('owner_check');
    }
  }

, когда я нажимаю кнопку один раз, показывает, что class owner_check исчезает в html-коде, но я все еще могу нажать кнопку снова,Зачем?Я хочу отключить функцию кнопки, но не добился успеха.

А как мне написать кнопку, чтобы снова сбросить функцию нажатия?если я использую

$('owner_check).on('click',function(e){

     $.ajax({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function($get) {
          $('.owner_check').off('click');
        }
      }
})

$('.reset_button').on('click',fucntion(e){
   $('owner_check').on('click',function(e){
   /* write long ajax code again??   */
   })
})

Answer 1

Когда вы делаете это:

$(".owner_check").click(function(e){

Вы связываете событие непосредственно с элементом. Jquery использует селектор, находит элемент и присоединяет событие. Вы можете изменить классы, текст внутри и т. Д., И это событие все еще прикреплено.

Так как вы можете удалить событие? Использовать выкл

$(".owner_check").off("click")

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

$(document).on("click", ".owner_check", function(e){ })

или вы можете проверить, есть ли класс внутри метода click

$(".owner_check").on("click", function() {
  if ($(this).hasClass("owner_check")) {
    console.log("yep")
  }
})

Answer 2

Когда вы делаете $(selector).click(handler), вы присоединяете обработчик к элементу, не имеет значения, если впоследствии элемент больше не имеет класса селектора.

Вы можете сохранить кнопку в переменнойи управлять методом jquery через эту переменную.Также определите функцию для обработчика.

const $button = $(".owner_check");

function handleClick() {
  $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(response) {
      $button.removeClass('owner_check').off('click');
    }
  });
}

$button.on('click', handleClick);

$('.reset_button').on('click', function(e) {
  $button.off('click').on('click', handleClick);
});

Answer 3

$(".owner_check").click() Это свяжет обработчик события с элементом с классом owner_check.

$('.owner_button').removeClass('owner_check'); Это удалит класс из элемента, но элемент все еще там.Поэтому, если вы щелкнете по нему еще раз, функция, присоединенная к обработчику событий, все еще выполняется, потому что она связывает элемент, а не класс.

---

Если вы хотите удалить обработчики событий, я бы предложил посмотреть на on() и off() в интерфейсе jQuery.Я думаю, что хорошей практикой является использование on('click', fn) over click(fn) в качестве стандартного способа привязки событий.