Make sure the i18Net init only runs once. pagebeforecreate runs for each page as it is navigated to. You could do it like this:
var i18nOpts = {
resStore: {
dev: {
translation: {
app: {
button: 'Button i18',
home: 'Home i18',
label: 'Label i18',
footer: 'Footer i18',
title: 'i18n Translation!',
li: 'Read-only',
lilink: 'Linked item',
col: 'Collapsible',
page1: 'to page 1', page2: 'to page 2',
colContent: 'Lorem ipsum dolor sit amet.'
}
}
}
}
};
var IsInit = false;
$(document).on("pagebeforecreate", function () {
if (!IsInit){
i18n.init(i18nOpts).done(function () {
$("html").i18n();
IsInit = true;
});
}
});
Here is a DEMO
You could also only run it on the pagecreate of the home page:
$(document).on("pagebeforecreate", "#home_page", function () {
i18n.init(i18nOpts).done(function () {
$("html").i18n();
IsInit = true;
});
});
Or not apply it to the whole $("html").