将点击事件绑定到 iframe 内的 class

Question

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

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

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

所以我的问题是...如何将点击事件绑定到 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 -->

将点击事件绑定到 iframe 内的 class

Bind click event to class inside of iframe

iframe

jquery

setinterval

event-binding