javascript - 最初のページのロード後に jQuery.ajax() 関数が機能しない

Question

モバイル ブラウジング用に mobile-Menu.html という名前のファイルを読み込もうとしていますが、ブラウザ ウィンドウが特定の幅を下回っている場合のみです。メニューは最初は正しく読み込まれますが、メニュー項目をクリックすると、スクリプトが各ページに含まれていても、メニューが後続のページに含まれません。Jquery.Mobile が読み込まれており、Jquery.Mobile は初めてです。関連するコードは次のとおりで、ready イベントの後に問題が発生します。

<script language="javascript" type="text/javascript">

var width = window.innerWidth; 
function loadjscssfile(filename, filetype){
'use strict';
var fileref;
if (filetype=="js"){ //if filename is a external JavaScript file
fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
}
else if (filetype=="css"){ //if filename is an external CSS file
fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
}

if (fileref!="undefined") {
document.getElementsByTagName("head")[0].appendChild(fileref);}
}

if (width < 500) { //Mobile

$(document).ready(function(){ 

$.ajax({
        url: "/mobile-Menu.html",
        success: function(data) { $('div#getMobileMenu').html(data); },
        error: function() { }
    })

});
loadjscssfile("/mobil-script.js", "js");
}
else { //Desktop
loadjscssfile("/desktop=script.js", "js");
} 

</script>