Question

我的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??   */
   })
})

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

$(".owner_check").click()将事件处理程序绑定到类为owner_check的元素。

$('.owner_button').removeClass('owner_check');这会将类从元素中删除，但是元素仍然存在。因此，如果再次单击它，则仍将执行附加到事件处理程序的函数，因为它绑定了元素而不是类。

如果要删除事件处理程序，建议您在jQuery API中查看on()和off()。我认为将on('click', fn)而非click(fn)用作事件绑定的标准方法是一种好习惯。

Answer 3

当您执行$(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);
});

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

3 个答案: