谷歌转换覆盖选择更改事件

Question

我有个大问题：

<div id="translate">
    <a href="#" id="google-translate" title="Google translate">Translate</a>
         <div id="google_translate_element" style="display:none">
         <script>
         function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: "sv" }, "google_translate_element");
         };
         </script>
     </div>
</div>

这给了我以下几点：

<div class="skiptranslate goog-te-gadget" style="">
  <div id=":1.targetLanguage">
    <select class="goog-te-combo">
    </select>
  </div>
    Powered by
  <span style="white-space: nowrap;">
  </span>
</div>

然而，我似乎无法劫持在选择新语言时触发的更改事件。

我尝试了以下几点：

var $textfield = find("#google-translate");
var $popup = find("#google_translate_element");
var $select = $popup.find("select");

$textfield.click(function () {
    $popup.fadeIn("fast");
    return false;
});

$select.bind("change", function () {
    $popup.fadeOut("fast");
});

有人找到解决办法了吗？

BR、Henric

Answer 1

最后，我通过对语言进行重新出现的检查来解决这个问题。这不是最漂亮的解决方案，但它起作用了。:)

var firstMenuValue = $("#main-menu li:first").text();

var checkIfTranslated = function () {
    var check = function () {

        if (firstMenuValue != $("#main-menu li:first").text()) {
            firstMenuValue = $("#main-menu li:first").text();
            $("#google_translate_element").fadeOut("fast");
        }

    };
    setInterval(check, 2000);
};

checkIfTranslated();

我希望这能帮到至少一个人。

Answer 2

MjrKusanagi建议的下面的代码工作得非常好。

​

$("body").on("change", "#google_translate_element select", function (e) {
    console.log(e);
    console.log($(this).find(":selected").text());
    console.log($(this).find(":selected").val());
});

​

查看下拉列表中的所有数据

​

$(".goog-te-combo").find("option").each(function () {
    console.log($(this).text() + ", " + $(this).val() + "\n");
});

​

Answer 3

我的猜测是，在运行JS代码之前，您需要验证来自Google的HTML是否已被注入。

我似乎找不到TranslateElement上的回调事件，只需在运行代码之前检查一个您知道应该在那里的HTML。Google Translate Widget - Translation complete callback