CODEWITHSUNDEEP
javascriptjquery
Pierre
Pierre

Reputation: 675

Remove/add a class and then execute an event on this new class

I use this script to change a class:

$('.fa.fa-plus-circle').each(function() {
    $(this).on('click', function () {
        $(this).removeClass().addClass("fa fa-minus-circle");
    });
});

Then I used

$('.fa.fa-minus-circle').each(function () {
     $(this).on('click', function () {
        $(this).removeClass().addClass("fa fa-plus-circle");
     });
});

So for the first one "fa.fa-plus-circle" that is the default when the page is loading, everything is good and the class changes. But when the class changes I can't do anything else after, JQuery continues to execute

$('.fa.fa-plus-circle').each(function() {
    $(this).on('click', function () {
        $(this).removeClass().addClass("fa fa-minus-circle");
    });
});

Why ?? Thanks in advance

Upvotes: 1

Views: 135

Answers (3)

PeterKA
PeterKA

Reputation: 24638

There's a benefit to not removing all classes. There seems no point to removing .fa so that you can add it. Which means that your code should be:

$(function() {
    $(document).on("click", '.fa.fa-minus-circle', function() {
        $(this).removeClass('fa-minus-circle').addClass("fa-plus-circle");
    });

    $(document).on("click", '.fa.fa-plus-circle', function() {
        $(this).removeClass('fa-plus-circle').addClass("fa-minus-circle");
    });
});

And as @AnoopJoshi has pointed out, you can use the .toggleClass() method:

$(function() {
    $('.fa').on('click', function() {
        $(this).toggleClass('fa-minus-circle fa-plus-circle');
    });
});

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You need to use delegate for this, because you are adding the classes dynamically. 

$(document).on("click", '.fa.fa-minus-circle', function() {
    $(this).removeClass().addClass("fa fa-plus-circle");
});

$(document).on("click", '.fa.fa-plus-circle', function() {
    $(this).removeClass().addClass("fa fa-minus-circle");
});

Also there is no need for looping through the elements for binding the event.

But the recommended approach will be,

$('.fa').click(function() {
    $(this).toggleClass("fa-minus-circle fa-plus-circle");
});

Edit

$(document).on("click", ".fa", function() {
    $(this).toggleClass("fa-minus-circle fa-plus-circle");
});

Upvotes: 2

Shanimal
Shanimal

Reputation: 11718

It's not .fa-minus-circle when it loads, so the each loop never happens. Even if you removed the each loop (which isn't required) it wouldn't add the listeners because it wouldn't find the selector. So, you have to use the delegates version of on which looks something like this...

$('body').on('click','.fa-minus-circle',function () {
    $(this).removeClass().addClass("fa fa-minus-circle");
});

fwiw, you could just use one class and toggleClass Then put all your fa-plus-circle code into the fa class since that is the default behavior.

$('body').on('click','.fa',function () {
    $(this).toggleClass("fa-minus-circle");
});

Upvotes: 1

Related Questions