Das Klicken auf das Symbol (und nicht auf den Rest der Schaltfläche) ist die einzige Möglichkeit, wie die Javascript-Abonnieren-Schaltfläche funktioniert.

Question

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>

Answer 1

您的想法是正确的，更改您的点击处理程序以选择按钮而不是图标，但您错过了之后的步骤，该步骤正在更改您检测单击的是“订阅”还是“取消订阅”的方式。当单击处理程序位于图标上时，该类直接位于被单击的元素上，但是当您更改为父按钮时，您必须向下选择按钮的子级以查看图标上的类以确定它是否是“订阅” ”或“取消订阅”。这应该是一个简单的修复：

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