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

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

我似乎无法在TranslateElement上找到回调事件，只需在运行代码之前检查一下您认为存在的HTML项目。 Google Translate Widget - Translation complete callback

Answer 3

MjrKusanagi建议的以下代码效果非常好。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Google翻译会覆盖选择更改事件

3 个答案: