Clicking the icon (and not the rest of the button) is the only way the Javascript subscribe button works.

Question

I have a subscribe user profile button that only works when I click on the rss font Awesome icon and the rest of the button does not work. I've tried several overrides to set the button element as a click event, but they don't work at all.

The following code only works when the icon element is clicked:

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

This is an attempt to make the entire button clickable:

<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

Your idea is correct, change your click handler to select the button instead of the icon, but you are missing the step after that which is changing your detection of whether the click was "Subscribe" or "Unsubscribe" Way. When the click handler is on the icon, the class is directly on the element that was clicked, but when you change to the parent button, you have to select down on the button's children to see the class on the icon to determine if it is "Subscribe" or "Unsubscribe". This should be an easy fix:

$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";
}