删除并在按钮jquery中添加一个类，无法使其工作

Question

我在页面上有一个类next-main-button的按钮。

在页面加载时，会显示一个模态，我有一个类look-task-again的按钮。如果我点击它，我想从下一个按钮中删除next-main-button课程并添加此课程next-task-error

这是下一个按钮：

 <button type="button" class="btn btn-default next-main-button" id="next-button" >Next</button>

单击模态按钮时会执行此事件，此处将删除next-main-button并添加next-task-error。

$(".look-task-again").off("click").on("click", function(){
        $('#error-popup-message').modal('hide');
        $("#next-button").removeClass("next-main-button");
        $("#next-button").addClass("next-task-error");
        });

如果我检查了元素，那么类被更改，但是如果我单击下一个按钮，则会执行已删除类的事件：

$('.next-main-button').off("click").on("click", function(){
        nextButtonClick();
    });

不是这个：

$(".next-task-error").off("click").on("click", function(){
        errorButtonClick();
    });

我尝试使用unbind方法并再次绑定按钮，我这样做了：

  $("#next-button").removeClass("next-main-button").unbind( "click" );
  $("#next-button").addClass("next-task-error").bind( "click" );

通过这种方式，下一个按钮被取消激活，没有任何反应！拜托，有人可以帮助我吗？

Answer 1

用于获取元素以绑定点击处理程序的选择器（即.next-task-error或.next-main-button）仅执行一次，并传递一个或多个元素。

然后将单击处理程序绑定到这些元素，但该绑定不知道您用于获取这些元素的选择器。绑定是直接在元素上完成的，并且永远不再验证它们的类（或者你可以使用的其他选择器）。

为了使它更具动态性，你可以（1）使用事件委托，或（2）在事件发生时测试被点击元素的类，或者（3）在条件改变时更改处理程序。

1。活动授权：

$(document).on("click", ".next-main-button", function(){
    nextButtonClick();
});

$(document).on("click", ".next-task-error", function(){
    errorButtonClick();
});

使用链接的更短版本：

$(document).on("click", ".next-main-button", nextButtonClick)
           .on("click", ".next-task-error", errorButtonClick);

2。处理程序中的测试类：

$('#next-button').on("click", function(){
    if($(this).is('.next-main-button')) {
        nextButtonClick();
    } else {
        errorButtonClick();
    }
});

3。状态更改时更改处理程序

这就像你试图做的那样：当条件改变时重新绑定正确的处理程序：

// set initial click handler
$('#next-button').on("click", function(){
    nextButtonClick();
});

$(".look-task-again").on("click", function(){
    $('#error-popup-message').modal('hide');
    $("#next-button").removeClass("next-main-button");
    $("#next-button").addClass("next-task-error");
    // replace click handler:
    $('#next-button').off("click").on("click", function(){
        errorButtonClick();
    });
});

更短的版本，使用链接：

// set initial click handler
$('#next-button').on("click", nextButtonClick);

$(".look-task-again").on("click", function(){
    $('#error-popup-message').modal('hide');
    $("#next-button").removeClass("next-main-button")
                     .addClass("next-task-error")
                     .off("click")
                     .on("click", errorButtonClick);
});