why jquery removeClass to button still work well after 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>

my 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');
    }
  }

when I click the button once, shows the class owner_check is disappear on html code,but I still can click the button again. why? I want to disable the button function but not get success.

And how can I write a button to reset the click function again? if I use

$('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??   */
   })
})

`removeClass()` always attempts to remove the class, but it won't give an error if the class doesn't exists. Nothing happens then. The function is bound to the event listner of the button which is not removed with the class. — Mark Baijens, Nov 16 '18 at 15:46
Also, if the class is removed, this will not unbind the callback. Suggest looking at `.off()`. — Twisty, Nov 16 '18 at 15:50
Think of an event handler as a sticker. Applying an event handler is saying "Find anyone wearing a hat, and put a sticker on their shirt.". Even if they take their hats off, they still have a sticker on their shirt. This is the equivalent of applying an event to every element with a class, and then removing the class. They may no longer satisfy your original criteria, but the event has already been attached. — Tyler Roper, Nov 16 '18 at 15:52
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Taplar, Nov 16 '18 at 16:01
Removing the class effectively makes this question about binding on dynamic elements. So it's a duplicate. — Taplar, Nov 16 '18 at 16:01

score 3 · Accepted Answer · answered Nov 16 '18 at 15:50

When you do this:

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

You are binding the event directly to the element. Jquery uses the selector finds the element and attaches the event. You can alter the classes, text inside, etc and that event is still attached.

So how can you remove the event? Use off

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

or if you want to rely on classes, than you use event delegation

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

or you can check to see if the class is there inside the click method

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

Thanks~if I want to make a return button like $('.reset').on('click',function(e){ $('.owner_check).on('click')....??} I must write the ajax function again?it's some redundance!? how can I got a return button? — robspin, Nov 16 '18 at 16:05

score 1 · Answer 2 · answered Nov 16 '18 at 15:50

$(".owner_check").click() This will bind an event handler to the element with the class owner_check.

$('.owner_button').removeClass('owner_check'); This removes the class from the element, but the element is still there. So if you click it again the function attached to the event handler is still executed because it's bound the the element, not to the class.

If you want to remove event handlers I would suggest look into on() and off() in the jQuery api. I think it's a good practise to use on('click', fn) over click(fn) as a standard way of event binding.

Appreciated~I edit my post again as I want a reset button to get the 'on' function again. Can you give me a suggestion? thanks~ — robspin, Nov 16 '18 at 16:19

Santiago Pernigotti · Answer 3 · 2018-11-17T11:27:53.797

When you do $(selector).click(handler), you attach the handler to the element, it doesn't matter if afterwards the element doesn't have the selector class anymore.

You can store the button in a variable and manage the jquery method through that variable. Also define a function for the handler.

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);
});

why jquery removeClass to button still work well after ajax?

3 Answers3