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>

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

Answer 1

似乎Microsoft脚本在翻译过程中更改了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

Jquery点击处理程序两次后不工作

1 个答案: