To understand a problem you must understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
So if you want to have separated js files for every page you need to initialize them from the BODY because HEAD is going to be discarded.
Like this:
<body>
<script>
// Your javascript will go here
</script>
// And rest of your HTML content
</body>
Same thing goes for your LINK and STYLE tags.
If you want to find out more read my other article with examples regarding this topic: Why I have to put all the script to index.html in jquery mobile
Other thing, when working with jQuery Mobile, never use this kind of initialization:
document.addEventListener("deviceready", function(){
$('p').append("<strong>HEllO</strong>");
});
Nor should you use classic jQuery document ready. Bot of them will usually trigger before page is successfully loaded into the DOM. That is why jQuery Mobile has page evenets. And you were correct with using pageinit event but you did it in a wrong way. jQuery Mobile page event's should be binded like this:
$(document).on('pageinit', ".normal",function() {
$('p').append("<strong>HEllO</strong>");
});
If you want to find out more read my other answer regarding document ready vs page events difference: jQuery Mobile: document ready vs page events