CODEWITHSUNDEEP
jquerygoogle-plusgoogle-plus-one
Kane
Kane

Reputation: 909

jQuery click() not working on Google +1 Button

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>

Upvotes: 1

Views: 714

Answers (3)

Kane
Kane

Reputation: 909

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>

Upvotes: 0

AJak
AJak

Reputation: 3873

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.

Upvotes: 0

ishegg
ishegg

Reputation: 9937

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.

enter image description here

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.

Upvotes: 1

Related Questions