Javascript 按钮插入后未绑定jQuery类

我有一个按钮可以执行以下操作：

按下时，该按钮将删除一个类（1）并添加另一个类 一（2）。这很有效

再次按下时，我想删除第二个类（2）和 添加第一个（1）。这不起作用

有点像开关

代码如下：

HTML:

jQuery：

$('.follow_btn').on("click", function () {
    var this_btn = $(this);
    this_btn.removeClass("btn-success follow_btn").addClass("btn-danger unfollow_btn");
});

$('.unfollow_btn').on("click", function () {
    var this_btn = $(this);
    this_btn.removeClass("btn-danger unfollow_btn").addClass("btn-success follow_btn");
});

一个JSFIDLE显示了我的问题：

为什么这不起作用？ 如果这还不够清楚，我将详细说明。 谢谢。

我有一个工作的JSFIDLE，这是因为在执行绑定事件的代码时，绑定元素存在问题。告诉我是否清楚，我可以更详细

---

这就是关键：

$（document）。在（“click”、'.unfollow_btn'，function（）{

上面已经提到了事件延迟，所以我将提出一种更简单的方法，使用

toggleClass

（我们需要两种方法，因为我们需要同时切换两对）：

演示： 最后一点，如何根据当前按钮类别执行不同的代码：

$('.follow_btn').on("click", function () {

    if ($(this).hasClass('follow_btn')) {
        alert('Follow');    
    }
    else {
        alert('Unfollow');
    }

    $(this).toggleClass('unfollow_btn follow_btn').toggleClass('btn-danger btn-success');
});

---

演示：我认为没有必要听整个文档的点击事件。 以下是我的解决方案：

---

单击处理程序只设置了一次，因此按钮只有follow click处理程序，即使在删除

follow\u btn

类之后，它仍然存在

您可以通过两种方式解决此问题：

1） 对follow和unfollow使用相同的单击处理程序，并在执行函数时检查该处理程序：

$('.follow_btn, .unfollow_btn').on("click", function() {
    var $btn = $(this),
        isFollow = $btn.hasClass('follow_btn');

    $btn.toggleClass("btn-danger unfollow_btn btn-success follow_btn");

    if (isFollow) {
        ...
    } else {
        ...
    }
});

---

2） 使用委托样式的事件处理程序，如Lorenzo所建议的。如果使用此解决方案，最好使用包含所有按钮的最近对象；否则文档级事件处理程序必须检查每次弹出的单击，以查看是否匹配

follow btn

或

unfollow btn

，明白了。谢谢非常感谢。太好了！如果你需要的话，你可以接受答案：）谢谢！这段代码只是冰山一角。我实际上有一些AJAX在点击时与数据库交互。我知道的还不够多，无法让它像这样高效（我不知道用这种方法是否可以做到这一点）但再次感谢。初始选择器必须适用于两个类，否则您会错过任何说明为

unfollow\u btn

@SamR的按钮。这是真的。但我不会更正我的答案，您的答案实际上更好，因此您应该获得学分。这只适用于所有按钮都以

follow\u btn

开头的情况。初始选择器必须适用于两者或y你可能会丢失一些按钮。很好的toggleClass用法，我不得不使用它两次。这种方法很聪明！可能会重复

$('.follow_btn').on("click", function () {
    $(this).toggleClass('unfollow_btn follow_btn').toggleClass('btn-danger btn-success')
});

$('.follow_btn').on("click", function () {

    if ($(this).hasClass('follow_btn')) {
        alert('Follow');    
    }
    else {
        alert('Unfollow');
    }

    $(this).toggleClass('unfollow_btn follow_btn').toggleClass('btn-danger btn-success');
});

$('.follow_btn').on("click", function () {
    var this_btn = $(this);
    if(this_btn.hasClass("follow_btn")){
      this_btn.removeClass("btn-success follow_btn").addClass("btn-danger unfollow_btn");
    }
    else{
      this_btn.removeClass("btn-danger unfollow_btn").addClass("btn-success follow_btn");
    }
});

$('.follow_btn, .unfollow_btn').on("click", function() {
    var $btn = $(this),
        isFollow = $btn.hasClass('follow_btn');

    $btn.toggleClass("btn-danger unfollow_btn btn-success follow_btn");

    if (isFollow) {
        ...
    } else {
        ...
    }
});