data-application font of an external script only used for the first display
Sorry for my English
I test on MacOs 10.13.6 and Safari 12.0.3
I write a multipage web app with only one query mobile file : main.html
All the js and css files are in the head (see below).
2 pages are dynamically updated with :
$(document).on('pageshow','[data-role="page"]',function(event){
switch(event.target.id){
case 'dictee' :
...
$(document).ready(function(){
call to abc2svg-1; // external script
});
...
break;
case 'correction':
...
$(document).ready(function(){
call to abc2svg-1; // external script
});
...
break;
default :
...
}
});
abc2svg is an external script which convert music in abc format to an svg image with class "music" using a data-application / font.
When the pages are first displayed everything is OK : .music{font: 24px music; fill:currentColor} is used
For the next displays there is a problem of font. The class of the svg is still music, the data-application font is still in the ressources but .music{font: 24px music; fill:currentColor} is not present and body {... font-family : sans-serif ...} is used.
I know that "$(document).ready(function(){" is normally not used in jQuery mobile but if I don't write it, the script abc2svg-1.js seems not loaded when the pageshow event is fired.
<head>
<title>Ear Training</title>
...
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery-mobile-theme/themes/myTheme.css" />
<link rel="stylesheet" href="jquery-mobile-theme/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.4.5.css">
<link rel="stylesheet" href="myStyles.css">
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="myMobileinit.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<link href="abc2svg_style.css" media="all" rel="stylesheet" type="text/css" />
<script src="abc2svg-1.js"></script>
... my scripts ...
</head>