click subscribe/unsubscribe button more than once without having refresh whole page

Question

I want users on my page to be able to subscribe and unsubscribe to each other as many times as they want without having to refresh whole page between each click...

To that end I have a subscribe/unsubscribe button...
And it works fine... when user clicks it updates the database and switch to the oppsite (subscribe->unsubscribe, and vice/versa)...

The problem is that after button-click and subsequent button-change the new button is now inactive and user has to refresh whole page to make it active again...

How do I fix this?

Code for those who need it:
c.php (channel page) / v.php (video page) // the setup on both pages is the exact same for this button

<div class="row" id="subscribeAll">
    <div class="col-xl-9 col-lg-8 col-md-7 col-sm-6 col-xs-12 col-12">
        // some stuff (not relevant)
    </div>
    <div class="col-xl-3 col-lg-4 col-md-5 col-sm-6 col-xs-12 col-12" id="subscribe">
        // if user logged in show content below
            // if user viewing own channel/video
                <button type="button" class="btn btn-lg btn-dark" disabled>
                    Subscribers // show number of subscribers
                </button>
            // else
                <button type="button" class="btn btn-lg // if not subscribed btn-success // else btn-danger" id="// if not subscribed subscribeButton // else unsubscribeButton" value="// randomstring of user whose channel/video user is watching">
                    // if not subscribed Subscribe // else Unsubscribe // show number of subscribers
                 </button>
    // else if user not logged in show content below
        <button type="button" class="btn btn-lg btn-dark" disabled>
            Subscribers // show number of subscribers
        </button>
    </div>
</div>

jQuery.js

// Subscribe
$(document).ready(function(){
    "use strict";
    $('button[id^="subscribeButton"]').on('click',function(){
        var self = $(this);
        var randomStringUser = self.val();
        $.ajax({
            type: "POST",
            url:'subscribe.php',
            data:"randomStringUser="+randomStringUser,
            success:function(){
                var subscribe = self.closest('#subscribeAll').find('[id^="subscribe"]');
                subscribe.load(location.href + " #subscribe>*", "");
            }
        });
    });
});

// Unsubscribe
$(document).ready(function(){
    "use strict";
    $('button[id^="unsubscribeButton"]').on('click',function(){
        var self = $(this);
        var randomStringUser = self.val();
        $.ajax({
            type: "POST",
            url:'unsubscribe.php',
            data:"randomStringUser="+randomStringUser,
            success:function(){
                var subscribe = self.closest('#subscribeAll').find('[id^="subscribe"]');
                subscribe.load(location.href + " #subscribe>*", "");
            }
        });
    });
});

Hope someone can help...

you need to assign the on click handlers to a parent element and pass a filter to it, see https://stackoverflow.com/questions/15090942/event-handler-not-working-on-dynamic-content for more information. hope that helps — flynorc, Dec 10 '17 at 01:54

score 1 · Accepted Answer · answered Dec 10 '17 at 01:55

1

Try changing our selectors from the following format

$('button[id^="unsubscribeButton"]').on('click',function(){

to

$(document).on('click','button[id^="unsubscribeButton"]', function(){

This allows jQuery to find the dynamically added elements, because they don't exist in the DOM when the page first renders, by using $(document).on('click') the document element still exists and therefore the click method still triggers

answered Dec 10 '17 at 01:55

ThatCoderGuy

657
4
10

dammit... it's always something simple that you overlook... can't believe I spent the better part of a day trying to fix this hehe - you are a lifesaver of the highest order - thank you.... and a well deserved upvote and accepted answer is given to you :) – APM Dec 10 '17 at 02:00
You're very welcome, these things bite us all in the butt at some point :) – ThatCoderGuy Dec 10 '17 at 02:14

click subscribe/unsubscribe button more than once without having refresh whole page

1 Answers1