javascript - 谷歌翻译覆盖选择更改事件

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，亨里克

Answer 1

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");
});