时间戳

首页 > 解决方案 > 为什么在ajax之后jquery removeClass to button仍然可以正常工作？

javascript - 为什么在ajax之后jquery removeClass to button仍然可以正常工作？

问题描述

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

当我单击一次按钮时，显示类 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??   */
   })
})

标签： javascriptjqueryajax

解决方案

当你这样做时：

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

您将事件直接绑定到元素。Jquery 使用选择器查找元素并附加事件。您可以更改类、内部文本等，并且该事件仍然附加。

那么如何删除事件呢？使用关闭

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

或者如果您想依赖类，则使用事件委托

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

或者您可以检查单击方法中是否存在该类

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

推荐阅读