无法从 jquery 移动导航栏重定向到另一个页面
Cannot be redirected to another page from jquery Mobile navigation bar
我正在尝试使用 jQuery 移动设备开发移动应用程序，并且我使用了官方文档中的导航栏选项卡小部件代码。
我的第一个问题是，当我单击页脚上显示的导航栏中的选项卡时，它不会将我定向到我想要的页面。当我使用 Chrome 的控制台进行调试时，出现此错误：
Uncaught TypeError: Cannot read property 'replace' of undefined jquery.mobile-1.4.4.js:4347
(anonymous function) jquery-2.1.1.min.js:2
n.extend.each jquery-2.1.1.min.js:2
n.fn.n.each jquery.mobile-1.4.4.js:4338
base.rewrite jquery.mobile-1.4.4.js:5070
(anonymous function) jquery-2.1.1.min.js:2
n.extend.proxy.n.isFunction.f jquery-2.1.1.min.js:2
n.Callbacks.j jquery-2.1.1.min.js:2
n.Callbacks.k.fireWith jquery-2.1.1.min.js:4
xjquery-2.1.1.min.js:4
n.ajaxTransport.k.cors.a.crossDomain.send.b
这是我的 accueil.html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Accueil</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.css">
<link href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile.structure-1.4.4.min.css" rel="stylesheet" />
<script src="../CasaElectionsMobileApp/public/jquery-2.1.1.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Casa Elections App</h1>
</div>
<!-- /header -->
<div role="main" class="ui-content">
<h2 class="mc-text-center">Bienvenue!</h2>
<p> <center>Bienvenue dans la page d'accueil de l'application CasaElections.</center><br>
Cette application est destinée à être utilisée par les correspondants des bureaux de vote. Son objectif est d'identifier les électeurs et compter le nombre de votants d'une part, ainsi que d'envoyer les résultats de vote après l'opération du dépouillement.
</p>
</div>
<!-- /content -->
<div data-role="footer" data-id="foo2" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="identificationElecteurs.html">Identification</a></li>
<li><a href="resultatsScrutin.html">Résultats</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
P.S : when I go to identificationElecteurs.html page and I click on the Accueil tab, I'm redirected to that page. Which is weird since I can't do the same going from the accueil.html to identificationElecteurs.html page nor from the resultatsScrutin.html page to identificationElecteurs.html.
resultatsScrutin.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Authentification</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.css">
<link href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile.structure-1.4.4.min.css" rel="stylesheet" />
<script src="../CasaElectionsMobileApp/public/jquery-2.1.1.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Casa Elections App</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<!--Tabs navigation-->
<div data-role="tabs" id="tabs" >
<div data-role="navbar" data-position="fixed">
<ul>
<li><a href="#one" data-ajax="false">BV</a></li>
<li><a href="#two" data-ajax="false">PP</a></li>
<!-- <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li> -->
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<!-- Will use the id to call on AJAX-->
<form id="form1" data-ajax="false" method="post">
<h3><center>Résultats après dépouillement</center></h3>
<label for="txt-cin">N° de CIN</label>
<input type="text" name="txt-cin" id="txt-cin" value="" placeholder="Taper votre nom d'utilisateur">
<button class="ui-btn ui-mini">Rechercher</button>
</form>
</div>
<div id="two">
<form id="form2" data-ajax="false" method="post">
<h3><center>Résultats après dépouillement</center></h3>
<label for="txt-nbre-ve">Nombre de voix exprimées (En chiffres) :</label>
<input type="text" name="txt-nbre-ve" id="txt-nbre-ve" value="" placeholder="Exemple : 456">
<label for="txt-nbre-bn">Nombre de bulletins nuls (En chiffres) :</label>
<input type="text" name="txt-nbre-bn" id="txt-nbre-bn" value="" placeholder="Exemple : 457">
<label for="txt-nbre-insc">Nombre d'inscrits (En chiffres) :</label>
<input type="text" name="txt-nbre-insc" id="txt-nbre-insc" value="" placeholder="Exemple : 458">
<label for="txt-nbre-votants">Nombre de votants (En chiffres) :</label>
<input type="text" name="txt-nbre-votants" id="txt-nbre-votants" value="" placeholder="Exemple : 459">
<button class="ui-btn ui-mini">Valider</button>
</form>
</div>
</div>
</div>
<div data-role="footer" data-id="foo2" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="identificationElecteurs.html">Identification</a></li>
<li><a href="resultatsScrutin.html">Résultats</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
</html>
问题已解决。显然这只是一些 JS 冲突。
我正在尝试使用 jQuery 移动设备开发移动应用程序，并且我使用了官方文档中的导航栏选项卡小部件代码。 我的第一个问题是，当我单击页脚上显示的导航栏中的选项卡时，它不会将我定向到我想要的页面。当我使用 Chrome 的控制台进行调试时，出现此错误：
Uncaught TypeError: Cannot read property 'replace' of undefined jquery.mobile-1.4.4.js:4347
(anonymous function) jquery-2.1.1.min.js:2
n.extend.each jquery-2.1.1.min.js:2
n.fn.n.each jquery.mobile-1.4.4.js:4338
base.rewrite jquery.mobile-1.4.4.js:5070
(anonymous function) jquery-2.1.1.min.js:2
n.extend.proxy.n.isFunction.f jquery-2.1.1.min.js:2
n.Callbacks.j jquery-2.1.1.min.js:2
n.Callbacks.k.fireWith jquery-2.1.1.min.js:4
xjquery-2.1.1.min.js:4
n.ajaxTransport.k.cors.a.crossDomain.send.b
这是我的 accueil.html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Accueil</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.css">
<link href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile.structure-1.4.4.min.css" rel="stylesheet" />
<script src="../CasaElectionsMobileApp/public/jquery-2.1.1.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Casa Elections App</h1>
</div>
<!-- /header -->
<div role="main" class="ui-content">
<h2 class="mc-text-center">Bienvenue!</h2>
<p> <center>Bienvenue dans la page d'accueil de l'application CasaElections.</center><br>
Cette application est destinée à être utilisée par les correspondants des bureaux de vote. Son objectif est d'identifier les électeurs et compter le nombre de votants d'une part, ainsi que d'envoyer les résultats de vote après l'opération du dépouillement.
</p>
</div>
<!-- /content -->
<div data-role="footer" data-id="foo2" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="identificationElecteurs.html">Identification</a></li>
<li><a href="resultatsScrutin.html">Résultats</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
P.S : when I go to identificationElecteurs.html page and I click on the Accueil tab, I'm redirected to that page. Which is weird since I can't do the same going from the accueil.html to identificationElecteurs.html page nor from the resultatsScrutin.html page to identificationElecteurs.html.
resultatsScrutin.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Authentification</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.css">
<link href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile.structure-1.4.4.min.css" rel="stylesheet" />
<script src="../CasaElectionsMobileApp/public/jquery-2.1.1.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Casa Elections App</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<!--Tabs navigation-->
<div data-role="tabs" id="tabs" >
<div data-role="navbar" data-position="fixed">
<ul>
<li><a href="#one" data-ajax="false">BV</a></li>
<li><a href="#two" data-ajax="false">PP</a></li>
<!-- <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li> -->
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<!-- Will use the id to call on AJAX-->
<form id="form1" data-ajax="false" method="post">
<h3><center>Résultats après dépouillement</center></h3>
<label for="txt-cin">N° de CIN</label>
<input type="text" name="txt-cin" id="txt-cin" value="" placeholder="Taper votre nom d'utilisateur">
<button class="ui-btn ui-mini">Rechercher</button>
</form>
</div>
<div id="two">
<form id="form2" data-ajax="false" method="post">
<h3><center>Résultats après dépouillement</center></h3>
<label for="txt-nbre-ve">Nombre de voix exprimées (En chiffres) :</label>
<input type="text" name="txt-nbre-ve" id="txt-nbre-ve" value="" placeholder="Exemple : 456">
<label for="txt-nbre-bn">Nombre de bulletins nuls (En chiffres) :</label>
<input type="text" name="txt-nbre-bn" id="txt-nbre-bn" value="" placeholder="Exemple : 457">
<label for="txt-nbre-insc">Nombre d'inscrits (En chiffres) :</label>
<input type="text" name="txt-nbre-insc" id="txt-nbre-insc" value="" placeholder="Exemple : 458">
<label for="txt-nbre-votants">Nombre de votants (En chiffres) :</label>
<input type="text" name="txt-nbre-votants" id="txt-nbre-votants" value="" placeholder="Exemple : 459">
<button class="ui-btn ui-mini">Valider</button>
</form>
</div>
</div>
</div>
<div data-role="footer" data-id="foo2" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="identificationElecteurs.html">Identification</a></li>
<li><a href="resultatsScrutin.html">Résultats</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
</html>
问题已解决。显然这只是一些 JS 冲突。