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

Question

我在页面上有一个带有next-main-button类next-main-button 。

在页面加载时，将显示一个模态，并且我有一个带有class look-task-again的按钮。 如果我单击它，则要从“ next-main-button删除“ next-main-button类，然后添加此类next-task-error

这是下一个按钮：

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

单击模式按钮时，将执行此事件，此处删除了下一个主按钮，并添加了下一个任务错误。

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