Skip to content
Advertisement

Changing class name and changing event response

I have a button with the class add-to-favorite when clicked the class is changed to remove-from-favorite and a file is added to favorite. When the user clicks on the button again, it has remove-from-favorite The class is changed to add-to-favorite and the file must be removed from the favorite, but this is not the case. The button acts like the remove-from-favorite even if the class is add-to-favorite;. Any ideas?

Here is the code :

<button type="button" class="add-to-favorite" name="button"><i class="material-icons">favorite_border</i></button>

Here is the Javascript code for add-to-favorite

$(".add-to-favorite").on("click", function(event) {
var clicked_button = $(this); 
    clicked_button.html("<i class='material-icons'>close</i>");
    clicked_button.removeClass('add-to-favorite');
    clicked_button.addClass('remove-from-favorite');
 })

Here is javascript for remove-from-favorite

$(".remove-from-favorite").on("click", function(event) {
var clicked_button = $(this);
    clicked_button.html("<i class='material-icons'>favorite_border</i>");
    clicked_button.removeClass('remove-from-favorite');
    clicked_button.addClass('add-to-favorite');
 })

Advertisement

Answer

Just use $(document).on() for click event:

$(document).on("click",".add-to-favorite", function(event) {
    var clicked_button = $(this); 
        clicked_button.html("<i class='material-icons'>close</i>");
        clicked_button.removeClass('add-to-favorite');
        clicked_button.addClass('remove-from-favorite');
 });

 $(document).on("click",".remove-from-favorite", function(event) {
    var clicked_button = $(this);
        clicked_button.html("<i class='material-icons'>favorite_border</i>");
        clicked_button.removeClass('remove-from-favorite');
        clicked_button.addClass('add-to-favorite');
 });
Advertisement