Abderrahman Hilali Abderrahman Hilali - 6 months ago 10
HTML Question

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

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');
 });
Comments