Ändern des Klassennamens und Ändern der Ereignisantwort

Question

Ich habe eine Schaltfläche mit der Klasse add-to-favorite, wenn angeklickt die Klasse geändert wird remove-from-favorite und eine Datei zum Favoriten hinzugefügt wird. Wenn der Benutzer erneut auf die Schaltfläche klickt, hat es remove-from-favorite Die Klasse wird in add-to-favorite geändert und die Datei muss aus dem Favoriten entfernt werden, aber das ist nicht der Fall. Die Schaltfläche verhält sich wie die remove-from-favorite, auch wenn die Klasse add-to-favorite; ist. Irgendwelche Ideen?

Hier ist der Code:

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

Hier ist die Javascript-Code für 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'); 
}) 

Dies ist Javascript für 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 1

Gerade $ (document) .auf verwenden() für Klickereignis:

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