Jquery Click 处理程序两次后不工作

Question

我遇到了一个奇怪的问题。我正在使用 bing 翻译器 (http://www.bing.com/widget/translator) 并尝试使用他们的 API 自行定制它。

这是我的测试代码。

脚本：

$(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>

现在，脚本运行良好，但前两次。例如，如果我点击日语，页面会相应地翻译，如果我点击返回英语或任何其他语言，页面也会相应地翻译。但是在第二次之后，如果我第三次点击任何语言。该功能不起作用。但它应该像在前两次点击中一样工作。我已经尝试了几个小时，但无法让它工作，所以我打开了问题。请有人指出问题所在。

Answer 1

似乎微软脚本在翻译过程中改变了 HTML 结构。因此，您必须使用委托：而不是$("#changeLang a").on("click", handler)，您将使用$('#changeLang').on("click", "a", handler)。此外，您的代码可以简化：

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