Привязать событие клика к классу внутри iframe

Question

Я работал над этим последние несколько дней и чувствую, что я рядом, но я что-то упускаю. Я пытаюсь отобразить модальное всплывающее окно, когда пользователь выбирает язык из виджета Google Translate.

Так как языки, которые могут выбирать пользователи, находятся внутри iframe, добавленного виджетом javascript после загрузки dom, я использую setInterval для проверки доступности iframe (по какой-то причине функция jquery.load() никогда не будет работать для меня). У меня также есть другой метод setInterval, чтобы проверить, когда языковые классы были загружены (они не доступны сразу, когда доступен iframe).

Когда я связываю событие click с элементами языка, все работает как положено... один раз... для того элемента, который щелкают. Если я удалю 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);    

});

Iframe загружается с помощью скрипта Google для перевода:

<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, использование привязок делегатов к событиям решило эту проблему. Следующий код демонстрирует, как получить выбранный язык из выпадающего списка google translate и войти в него в консоли. Это должно стать хорошей отправной точкой для любого, кто столкнется с этим вопросом в будущем.

<!-- 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 -->