Question

我想在有人使用google translate dropdown将我的网站翻译成其他语言后执行jquery功能。这是我没有运气的尝试：

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

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

Answer 1

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

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

首先，您无法向该按钮添加事件监听器，因为Google Translate小部件已经分配了一个。

其次，我发现在翻译后，GT小部件会将标记设置为一个类。

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

注意：这打破了Firefox第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);

Answer 2

我知道这已经过时了，但我最近一直在努力解决这个问题，这可能对某人有所帮助。

您的代码存在的问题是您正在将侦听器绑定到文档准备就绪时不存在的元素上。虽然.change()方法在技术上是.on()的捷径，但你在dom中没有达到足够高的水平以允许这个未来的方法。除了dom。

所以你的代码应该是：

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

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

它在我目前正在工作的网站上运作良好。

为谷歌翻译添加jquery事件监听器

2 个答案: