在HTML / JSON中使用i18n

Question

我正在尝试在HTML和JS文件中使用i18n，我都将其添加到了HTML页面的js文件中。

$(document).ready(function() {
  i18next
    .use(window.i18nextXHRBackend)
    .init(
      {
        backend: {
          loadPath: '../i18n/en.json'
        }
      },
      function(err, t) {
        jqueryI18next.init(i18next, $);
        messagesLoaded = true;
      }
    );
});

我进一步有：

createButton.textContent = i18next.t('character.create');
cancelButton.textContent = i18next.t('general.exit');

但是，当我去加载页面时，它显示的是character.create，而不是Create Character

我的en.json文件在i18n目录的上方一个目录中，并且en.json包含以下内容：

{
"general": {
    "password": "Password",
    "access": "Access",
    "add": "Add",
    "drop": "Drop",
    "accept": "Accept",
    "cancel": "Cancel",
    "exit": "Exit",
    "back": "Back",
    "name": "Name",
    "purchase": "Purchase",
    "type-one": "Type 1",
    "type": "Type {{value}}",
    "consume": "Consume",
    "open": "Open",
    "equip": "Equip",
    "confiscate": "Confiscate",
    "withdraw": "Withdraw",
    "store": "Store",
    "unit-price": "Unit price: ",
    "price": "Price: ",
    "amount": "Amount: ",
    "inventory": "Inventory"
},
"login": {
    "message": "Welcome back to LS-V. You need to insert your password below in order to log in",
    "error": "Your password is incorrect. Please try again."
},
"character": {
    "title": "Character list",
    "create": "Create new",
    "surname": "Surname",
    "age": "Age: ",
}

有人会知道为什么会这样吗？我尝试使用i18n的每个页面（包括HTML页面）都在发生这种情况。我试图弄清楚我在做错什么，但现在被卡住了。