Ich habe eine Schaltfläche zum Abonnieren eines Benutzerprofils, die nur funktioniert, wenn ich auf das RSS-Font-Awesome-Symbol klicke, der Rest der Schaltfläche funktioniert jedoch nicht. Ich habe mehrere Überschreibungen ausprobiert, um das Schaltflächenelement als Klickereignis festzulegen, aber sie funktionieren überhaupt nicht.

Der folgende Code funktioniert nur, wenn auf das Symbolelement geklickt wird:

            <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>

Hier ist ein Versuch, die gesamte Schaltfläche anklickbar zu machen:

<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>