为谷歌翻译添加 jQuery 事件监听器答案

【问题标题】：Adding jQuery event listener for Google Translate为谷歌翻译添加 jQuery 事件监听器
【发布时间】：2013-04-09 00:49:36
【问题描述】：

在有人使用google translate dropdown 将我的网站翻译成另一种语言后，我想执行一个 jQuery 函数。这是我没有运气的尝试：

$('document').ready(function () {
   $(".goog-te-menu-value").change(function() {
       alert("My code is working!");
   });
});

在正常的下拉菜单中，这可以正常工作，但我无法定位谷歌翻译 div .. 因为我相信它在 iframe 中。无论如何要针对 iframe 中的 div 以在 jQuery 中使用？或者也许是另一种解决方法？如果有人对此有任何想法，将不胜感激。

【问题讨论】：

标签： jquery iframe drop-down-menu google-translate jquery-events

【解决方案1】：

我也刚刚将 Google 翻译小部件添加到我的网站，当然，它破坏了布局！

所以我查看了小部件使用的脚本。

首先，您不能向按钮添加事件侦听器，因为 Google 翻译小部件已经分配了一个。

其次，我发现在它翻译之后，GT小部件将标签设置为有一个类。

所以，我给我的标签一个“docstart”的 id 并创建了以下脚本。

注意：这破坏了 Firefox v. 21，但它在 IE 9 中有效。我没有在任何其他浏览器中测试过。

function LayoutFix() {
// code here to fix your layout
myListener();
};
function waitForGoogle() {
setTimeout (function myListener() {
var e = document.getElementById('docstart').className;
var l = e;
window.setInterval(function() {   
var cN = e.className;
if (cN !== l)
// Call function to fix the layout on class change
LayoutFix();
// Set a 10 second iteration
},10000);
// Set a 10 second wait for GT widget to load
},10000);
}
// Finally, load the listener on document.ready()
$(document).ready(waitForGoogle);

【讨论】：

【解决方案2】：

我知道这是旧的，但我最近一直在努力，它可能会帮助一些人。

您的代码的问题是您将侦听器绑定在文档准备就绪时不存在的元素上，尽管.change() 方法在技术上是.on() 的快捷方式，但您还不够高在 dom 中允许这种“未来”添加到 dom。

所以你的代码应该是：

$('#google_translate_element').on('change','select.goog-te-combo',function(e){ console.log($(this).val()); /* or  alert($(this).val()); */ });

这将允许选择框在谷歌添加时绑定更改侦听器。

它在我目前工作的网站上完美运行。

【讨论】：