Jquery Click Handler Not Working After Two Times

Question

I am facing a little strange problem. I am using bing translator (http://www.bing.com/widget/translator) and trying to customize it on my own using their API.

Here is my code for testing purposes.

Script:

$(document).ready(function (e) {
    var lang;
    $('#changeLang a').click(function (e) {
        Microsoft.Translator.Widget.Translate(null, 'en', null, null, function () {
            lang = Microsoft.Translator.Widget.GetAutoDetectedLanguage();
            alert(lang)
        });
        document.getElementById('WidgetFloaterPanels').style.display = 'none';
        var to = $(this).attr('id');
        if (to == "en") {
            Microsoft.Translator.Widget.Translate(lang, 'en');
            document.getElementById('WidgetFloaterPanels').style.display = 'none';
        } else if (to == "ja") {
            Microsoft.Translator.Widget.Translate(lang, 'ja');
            document.getElementById('WidgetFloaterPanels').style.display = 'none';
        } else if (to == "fr") {
            Microsoft.Translator.Widget.Translate(lang, 'fr');
            document.getElementById('WidgetFloaterPanels').style.display = 'none';
        } else if (to == "ru") {
            Microsoft.Translator.Widget.Translate(lang, 'ru');
            document.getElementById('WidgetFloaterPanels').style.display = 'none';
        }
    });
}); //ready ends

HTML:

<div id="changeLang">
 <a  href="#" id="en">English</a>
 <a  href="#" id="ja">Japenese</a>
 <a  href="#" id="fr">French</a>
 <a  href="#" id="ru">Russia</a>
</div>
<div>This paragraph needs to be translated</div>

Now, the script is working fine as it should but for the first two times. For example, if i click on Japenese, the page would translate accordingly, and if i click back to english or any other language, the page will be translated accordingly. But after the second time, if i click third time on any language. The function does not work. But it should work like it was working in the first two clicks. I have tried several hours but can't get it to work so i opened the questions. Please someone point it out to me what is wrong.

Have you tired a JavaScript debugger like firebug or ie developer tools? If so, do you receive any error messages on the 3rd attempt? — Chris W, Dec 25 '13 at 12:15
nope, i have not tried it yet. let me try it. I'll let you know — Awais Umar, Dec 25 '13 at 12:26
I am not getting any error their. Neither warning nor error. — Awais Umar, Dec 25 '13 at 12:33

score 2 · Accepted Answer · answered Dec 25 '13 at 12:37

2

It seems that Microsoft script changes the HTML structure during the translation process. Because of this you have to use delegation: instead of $("#changeLang a").on("click", handler) you will do $('#changeLang').on("click", "a", handler). Also, your code can be simplified:

var lang;
$('#changeLang').on("click", "a", function (e) {
    var to = $(this).attr('id');
    console.log("Translating from ", lang, " to ", to);
    Microsoft.Translator.Widget.Translate(lang, to);
    lang = to;
});

JSFIDDLE

answered Dec 25 '13 at 12:37

Ionică Bizău

109,027
88
289
474

you really are a life savor. I wasted many hours on this. Can you tell me how'd find it out? – Awais Umar Dec 25 '13 at 12:43
1

@user2982923 I inspected the HTML code using the developer tools in Chrome. I saw that `` elements were added during the translate progress. This means that we have dynamic elements, so we need delegation. – Ionică Bizău Dec 25 '13 at 12:46
I didn't noticed that. Never had it in mind. Thank you for being awesome :-) – Awais Umar Dec 25 '13 at 12:46

Jquery Click Handler Not Working After Two Times

1 Answers1

Linked