在HTML/JSON中使用i18n

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

{
"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页面。我正试图找出我做错了什么,但现在却陷入了困境。