代码之家 › 专栏 › 技术社区 › robspin

为什么jquery removeclass-to-button在Ajax之后仍然有效?

ajax jquery javascript

robspin · 技术社区 · 6 年前

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

当我单击按钮一次,显示类所有者检查在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??   */
   })
})

3 回复 | 直到 6 年前

epascarello 6 年前

当你这样做的时候:

$(".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")
  }
})

Mark Baijens 6 年前

$(".owner_check").click() 这会将事件处理程序绑定到具有类的元素 owner_check .

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

如果您要删除事件处理程序,我建议您查看 on() 和 off() 在jquery API中。我认为这是一个很好的练习 on('click', fn) 结束 click(fn) 作为事件绑定的标准方法。

Santiago Pernigotti 6 年前

当你这样做的时候 $(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);
});