插入后按钮不绑定jQuery类

Question

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

1. 当按下时，该按钮会删除一个类（1）并添加另一个类 一（2）。这很有效。
2. 当再次按下时，我想删除第二个类（2）和 添加第一个（1）。这样做不工作。

有点像切换。

这是代码：

HTML：

<button class="follow_btn btn btn-success" value="1">Follow</button>

CSS：

.btn {
    padding:1em;
}
.btn-success {
    background:green;
}
.btn-danger {
    background:red;
}

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

和一个JSFiddle显示我的问题：

http://jsfiddle.net/thedarklord1939/pGuue/

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

Answer 1

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

所以这是关键：$(document).on("click", '.unfollow_btn', function () {

Answer 2

关于事件爆发已经说过了，所以我会提出另一种方法，使用toggleClass更短的时间（我们需要其中两个因为我们需要同时切换两对）：

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

演示：http://jsfiddle.net/pGuue/3/

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

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

演示：http://jsfiddle.net/pGuue/4/

Answer 3

点击处理程序只设置一次，因此该按钮只有跟随点击处理程序，即使删除了follow_btn类，仍然 。

您可以通过以下两种方式解决：

1）对follow和unfollow使用相同的click处理程序，并在执行函数时检查它是什么：

$('.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匹配。

Answer 4

我认为不需要在整个文档上收听点击事件。 这是我的解决方案：

Jsfiddle

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