Cliquer sur l'icône (et non sur le reste du bouton) est le seul moyen pour le bouton d'abonnement Javascript de fonctionner.

Question

J'ai un bouton d'abonnement au profil utilisateur qui ne fonctionne que lorsque je clique sur l'icône Awesome de la police rss et le reste du bouton ne fonctionne pas. J'ai essayé plusieurs remplacements pour définir l'élément bouton comme événement de clic, mais ils ne fonctionnent pas du tout.

Le code suivant ne fonctionne que lorsque l'on clique sur l'élément icône :

            <button class='subscribe-button profile-subscribe'> 
                <?php if ($profile->userSubscribed): ?>
                    <i class="fa-solid fa-user-check subscribe" data-user='<?= esc($profile->username);?>'></i>Subscribed
                <?php else: ?>   
                    <i class="fa-solid fa-rss subscribe" data-user='<?= esc($profile->username);?>'>
                    </i> Subscribe
                <?php endif ?>
            </button>

<script>
    $(document).ready(function() {  
        var csrfName = "<?= csrf_token(); ?>";
        var csrfHash = "<?= csrf_hash(); ?>"; 

    // If user clicks the subscribe button
        $(".subscribe").on("click", function () {
            var userProfile = $(this).data("user");
            $clicked_btn = $(this);

            if ($clicked_btn.hasClass("fa-solid fa-rss")) {
                action = "subscribe";
            } else if ($clicked_btn.hasClass("fa-solid fa-user-check")) {
                action = "unsubscribe";
            }

            $.ajax ({
                url: "<?= base_url(); ?>/users/members/view_profile/<?= $profile->username;?>",
                type: "post",
                dataType: "json",
                data: {
                    [csrfName]: csrfHash,
                    "action": action,
                    "user_profile": userProfile,
                },
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                },
                success: function(data) {
                    var res = data;
                    csrfName = res.csrfName;
                    csrfHash = res.csrfHash;

                    if (action == "subscribe") {
                        $clicked_btn.removeClass("fa-solid fa-rss");
                        $clicked_btn.addClass("fa-solid fa-user-check");
                    } else if (action == "unsubscribe") {
                        $clicked_btn.removeClass("fa-solid fa-user-check");
                        $clicked_btn.addClass("fa-solid fa-rss");
                    }
                }
            });
        });
    });
</script>

Voici une tentative pour rendre l'intégralité du bouton cliquable :

<button class='subscribe-button profile-subscribe subscribe' id='<?= esc($profile->username); ?>'>   
    <i class="fa-solid fa-rss"></i> Subscribe
</button>

<script>
    $(document).ready(function() {  
        var csrfName = "<?= csrf_token(); ?>";
        var csrfHash = "<?= csrf_hash(); ?>"; 

    // If user clicks the subscribe button
        $(".subscribe").on("click", function (event) {
            var userProfile = this.id;
            $clicked_btn = $(this);

            if ($clicked_btn.hasClass("fa-solid fa-rss")) {
                action = "subscribe";
            } else if ($clicked_btn.hasClass("fa-solid fa-user-check")) {
                action = "unsubscribe";
            }

            $.ajax ({
                url: "<?= base_url(); ?>/users/members/view_profile/<?= $profile->username;?>",
                type: "post",
                dataType: "json",
                data: {
                    [csrfName]: csrfHash,
                    "action": action,
                    "user_profile": userProfile,
                },
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                },
                success: function(data) {
                    var res = data;
                    csrfName = res.csrfName;
                    csrfHash = res.csrfHash;
                
                    if ($('.subscribe').hasClass('subscribed')) {
                        $('.subscribe').removeClass('subscribed');
                        $('.subscribe').html('<i class="fa-solid fa-rss"</i>Subscribe');
                        
                    } else {
                        $('.like').addClass('subscribed');
                        $('.like').html('<i class="fa-solid fa-user-check">Subscribed');
                    }
                }
            });
        });
    });
</script>

Answer 1

Vous avez la bonne idée de changer votre gestionnaire de clics pour sélectionner un bouton au lieu d'une icône, mais il vous manque l'étape suivante qui change la façon dont vous détectez si le clic était "S'abonner" ou "Se désabonner". Lorsque le gestionnaire de clics est sur l'icône, la classe est directement sur l'élément sur lequel on a cliqué, mais lorsque vous passez au bouton parent, vous devez sélectionner les enfants du bouton pour voir la classe sur l'icône afin de déterminer si elle est « S'abonner » ou « Se désinscrire ». Cela devrait être une solution simple :

$clicked_btn = $(this);
let $icon = $clicked_btn.find('i').first();

if ($icon.hasClass("fa-solid fa-rss")) {
    action = "subscribe";
} else if ($icon.hasClass("fa-solid fa-user-check")) {
    action = "unsubscribe";
}