Geek asks and answers

Button does not bind jQuery class after insertion

I have a button that does the following:

  • When pressed , the button deletes the class (1) and adds another one (2). It works.
  • When pressed again , I want to remove the second class (2) and add the first (1). It does not work.

Sort as a switch.

This is the code:

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

and JSFiddle showing my problem:

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

Why is this not working? If this is not clear enough, I will clarify. Thank.

+3
source share
4 answers

, follow_btn.

:

1) , , :

$('.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) , . , , ; , , , follow-btn unfollow-btn.

+1

jsfiddle , - , , , , , , .

, : $(document).on("click", '.unfollow_btn', function () {

+2

delagation, , 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/

+2

, click . :

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

More articles:


All Articles