jQuery click() not working on Google +1 Button

Question

This page (http://buttonspace.com) is using the Google +1 button at the top.

Documentation: https://developers.google.com/+/web/+1button/

It was working fine until about 2 months ago, when I'm assuming Google updated the code for their button.

Any ideas why this jQuery click() code isn't firing?

<script>
    $("#g-plusone").click(function(){
        console.log("Clicked!");
        alert("Clicked!");              
    });
</script> 

Answer 1

It seems you have the selector wrong. I'm seeing it as .google-plus-one on a LI element. Or, there's also a DIV inside it with ID #___plusone_0 , maybe that's what you're looking for.

Try it like this:

<script>
    $(".google-plus-one").click(function(){
        console.log("Clicked!");
        alert("Clicked!");              
    });
</script> 

Though then you'd be attaching the event to the LI (or DIV) containing the Iframe with the button, not the button itself. And you won't be able to get to the button inside the Iframe because of the Same Origin Policy.

Answer 2

So my workaround solution is to use an image to represent the button, then a hyperlink that opens the new window for the G+ post. By bypassing Google's API and iframe, I'm able capture the click event.

<li class="google-plus-one">                
    <a href="https://plus.google.com/share?app=110&url=<?php echo $url; ?>" target="_blank"><img src="/google_plus.png" alt="Google +1"></a>
</li>

<script>
    $(".google-plus-one").click(function(){     
        console.log("clicked!");                
    });
</script>

Answer 3

You'll need something along the lines of:

$("body").contents().find(".google-plus-one").click() 

to find the content inside the iframe and do something to it. What you were doing before would require the markup to be on the page initially in order to bind your event to the element. You need a way to do select the element after its rendered to the DOM.