G+ sign-in button callback binding twice

Question

I'm using G+ sign in for my website and I found this problem.

My website has toolbar (its render with Javascript) and G+ login button on it so I attach G+ Javascript API in the toolbar file

[toolbar-notlogin.php]

<script>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js?onload=render';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

function render () 
{
        var config = {
            "callback": "loginCallback",
            "clientid": "xxxxxxxxx.apps.googleusercontent.com",
            "cookiepolicy": "single_host_origin",
            "requestvisibleactions": "http://schemas.google.com/AddActivity",
            "scope": "https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/userinfo.email"
            };

            $('#googleCustomLoginBtn .buttonText').text('Login with Google');
            gapi.signin.render ("gplusLoginBtn", config);
        }
</script>

When the toolbar (with G+ JS API) loaded it calls callback function render() for render the G+ sign-in button. It work very well so my toolbar changes into state of loging in (show the user's profile) and G+ sign-in button gone (HTML replaced).

When user logout the toolbar change state to not loging in (HTML replaced again) it call render() again and the sign in button work.

But the problem is when I sign in this time the callback function ( loginCallback() ) called twice. It seem like the callback function bind again. (I try to not calling render() in the second time but the sign in button not work. )

Is there any way to fix it? Thank you.

Answer 1

Somewhat novice here but I remember reading somewhere that there are cases when you may accidentally call call the function more than once because you have it bound to more than one element. Have you tried removing the event handler directly before declaring it?

That way, if there already is an instance of it, it will be removed before adding another one.

Something like this

$('#randomID').unbind('submit').bind('submit');