Mengklik ikon (dan bukan butang yang lain) ialah satu-satunya cara butang langgan Javascript berfungsi.

Question

Saya mempunyai butang langgan profil pengguna yang hanya berfungsi apabila saya mengklik pada ikon Awesome font rss dan butang selebihnya tidak berfungsi. Saya telah mencuba beberapa penggantian untuk menetapkan elemen butang sebagai acara klik, tetapi ia tidak berfungsi sama sekali.

Kod berikut hanya berfungsi apabila elemen ikon diklik:

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

Berikut ialah percubaan untuk menjadikan keseluruhan butang boleh diklik:

<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

Anda mempunyai idea yang tepat untuk menukar pengendali klik anda untuk memilih butang dan bukannya ikon, tetapi anda kehilangan langkah selepas itu yang mengubah cara anda mengesan sama ada klik itu adalah "Langgan" atau "Nyahlanggan". Apabila pengendali klik berada pada ikon, kelas berada terus pada elemen yang diklik, tetapi apabila anda menukar kepada butang induk, anda perlu memilih turun pada anak butang untuk melihat kelas pada ikon untuk menentukan sama ada ia "Langgan" atau "Nyahlanggan". Ini sepatutnya penyelesaian yang mudah:

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