jQuery click() 在 Google +1 按钮上不起作用答案

【问题标题】：jQuery click() not working on Google +1 ButtonjQuery click() 在 Google +1 按钮上不起作用
【发布时间】：2017-08-31 19:36:34
【问题描述】：

此页面 (http://buttonspace.com) 正在使用顶部的 Google +1 按钮。

文档： https://developers.google.com/+/web/+1button/

直到大约 2 个月前它工作正常，当时我假设 Google 更新了他们按钮的代码。

知道为什么这个 jQuery click() 代码没有触发吗？

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

【问题讨论】：

据推测，谷歌已经更新了它的功能来捕捉点击事件和evt.preventDefault() 和evt.stopPropagation()——看起来点击事件根本没有从最里面的元素传回。通过侦听同一元素上的悬停事件来测试这一点。

标签： jquery google-plus google-plus-one

【解决方案1】：

您的选择器似乎错误。我在 LI 元素上将其视为.google-plus-one。或者，里面还有一个DIV，ID为#___plusone_0 ，也许这就是你要找的。p>

试试这样：

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

虽然您会将事件附加到包含带有按钮的 Iframe 的 LI（或 DIV），而不是按钮本身。由于同源策略，您将无法访问 iframe 内的按钮。

【讨论】：

不幸的是，这也没有做任何事情:(
如果我在按钮外几乎没有点击它会起作用，但在实际按钮本身上却不起作用。所以我猜“同源政策”意味着没有办法让它发挥作用？
不幸的是，如果 iframe'src 位于同一域中，您只能访问 iframe 的元素。
那么您是说没有办法（使用 javascript、jQuery、HTML 等）捕获对该按钮的点击？
我认为你应该做的是使用 JS API 制作你自己的按钮，然后当用户点击你触发 +1 和自定义功能。看来没有更多选择了。

【解决方案2】：

你需要一些类似的东西：

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

在 iframe 中查找内容并对其进行处理。您之前所做的需要最初将标记放在页面上，以便将您的事件绑定到元素。您需要一种方法在元素呈现到 DOM 后对其进行选择。

【讨论】：

我试过这个，没有运气。也许它与另一个答案提到的“同源政策”问题有关？
您是否尝试过将其设为 ON，以便在加载到 DOM 之前不必绑定？类似 $('body').on('click', '.google-plus-one', function () { console.log("here"); });
我不得不将 jquery 从 1.4.1 升级到 3.2.1，因为“on”功能不可用。但可惜它仍然不起作用:(

【解决方案3】：

所以我的解决方案是使用图像来表示按钮，然后使用超链接打开 G+ 帖子的新窗口。通过绕过 Google 的 API 和 iframe，我可以捕获点击事件。

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

【讨论】：