Question

过去几天我一直在研究这个问题，觉得我很接近，但我错过了一些东西。我想要完成的是当用户从谷歌翻译小部件中选择一种语言时显示模态弹出窗口。

由于用户可以选择的语言是在dom加载后由javascript小部件添加的iframe内部，我使用setInterval来检查iframe何时可用（出于某种原因jquery＆＃39; s .load（）函数永远不会为我工作）。我还有另一个setInterval方法来检查何时加载语言类（当iframe可用时它们不会立即可用）。

当我将click事件绑定到语言元素时，一切都按预期工作...一次...用于单击任何元素。如果我删除clearInterval(waitForLanguageLinks)，那么每次都会按预期工作，但这会导致内存泄漏，并且页面最终会崩溃（正如人们所期望的那样）。

所以我的问题是......如何将click事件绑定到setInterval()回调中的每个元素，并在调用clearInterval()之后保持绑定该事件（希望这样做）义）。

$(document).ready(function(){

    var iframe;
    var languageElements;

    var translateIframeCheck = setInterval(function(){

        iframe = $('.goog-te-menu-frame').contents();

        if(iframe.length > 0){

            clearInterval(translateIframeCheck);

        }

    }, 100);

    var waitForLanguageLinks = setInterval(function(){

        languageElements = iframe.find('.goog-te-menu2-item');

        if(typeof iframe !== "undefined" && languageElements.length > 0){

            languageElements.click(function(){

                console.log($(this).find('.text').html());

            });

            clearInterval(waitForLanguageLinks);

        }

    }, 100);    

});

google脚本加载iframe进行翻译：

<iframe class="goog-te-menu-frame skiptranslate" title="Language Translate Widget" style="visibility: visible; box-sizing: content-box; width: 1004px; height: 285px; left: 413.5px; top: 167px;" frameborder="0"></iframe>

Answer 1

根据@Taplar的建议，使用delegate event bindings解决了这个问题。以下代码演示了如何从Google翻译下拉列表中获取所选语言并将其登录到控制台。对于今后偶然发现这个问题的人来说，这应该是一个很好的起点。

<!-- BEGIN GOOGLE TRANSLATE
---------------------------------------------------------------------->

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<div id="google_translate_element"></div>
<script type="text/javascript">     
function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script>

<script>
/*
    Keep in mind:
        > If google ever changes the structure of the translate element, this code
            will no longer function, and will have to be updated to reflect those
            changes.
        > There appears to be a bug in the translation widget itself where if
            a langauge other than the default langauge is chosen and the page is
            translated, then the default language is chosen again, then another
            langauge is chosen, nothing will happen, and the language must be
            selected a second time. 
*/


$(document).ready(function(){

    var iframe;

    var translateIframeCheck = setInterval(function(){

        iframe = $('.goog-te-menu-frame').contents();

        if(iframe.length > 0){


            $(iframe).on("click", ".goog-te-menu2 table tbody tr td a", function(){

                console.log($(this).find('.text').html());

            });

            clearInterval(translateIframeCheck);

        }

    }, 100);


});


</script>
<!----------------------------------------------------------------------
END GOOGLE TRANSLATE -->

将click事件绑定到iframe内的类

1 个答案: