javascript - jQuery Mobile showing doubled button -


i'm trying first app jqm+phonegap.

here's code:

<!doctype html> <!--        licensed apache software foundation (asf) under 1        or more contributor license agreements.  see notice file        distributed work additional information        regarding copyright ownership.  asf licenses file        under apache license, version 2.0 (the        "license"); may not use file except in compliance        license.  may obtain copy of license @           http://www.apache.org/licenses/license-2.0         unless required applicable law or agreed in writing,        software distributed under license distributed on        "as is" basis, without warranties or conditions of        kind, either express or implied.  see license        specific language governing permissions , limitations        under license. --> <html>   <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8" />     <meta name="format-detection" content="telephone=yes" />     <meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />     <link rel="stylesheet" type="text/css" href="css/index.css" />     <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />     <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.1.min.css" />     <link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.1.min.css" />     <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>     <script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>     <script type="text/javascript" src="cordova-2.7.0.js"></script>     <script type="text/javascript" src="js/index.js"></script>     <script type="text/javascript">       app.initialize();     </script>     <title>hello world</title>   </head>   <body>     <div class="app" data-role="page">        <div data-role="content">         <a onclick="$(this).toggleclass('toggleoffbutton');" data-role="button" class="toggleonbutton" id='togglebutton' data-corners="true" data-mini="false" data-theme="a" tabindex="2"/>       </div>       <!-- /content -->        <div data-role="footer">         footer       </div>      </div>     <!-- /page -->   </body> </html> 

as can see simple page.

the problem outputs double button instead of 1 , it's driving me mad.

replacing

<a onclick="$(this).toggleclass('toggleoffbutton');" data-role="button" class="toggleonbutton" id='togglebutton' data-corners="true" data-mini="false" data-theme="a" tabindex="2"/> 

with string makes print string 1 time intended button repeated twice.

any ideas on can problem?

i reading including twice jqm scripts but, can see in code, they're not double referenced!

i have tested html , found problem.

jquery mobile button created tag element must closed. change this:

<a onclick="$(this).toggleclass('toggleoffbutton');" data-role="button" class="toggleonbutton" id='togglebutton' data-corners="true" data-mini="false" data-theme="a" tabindex="2"/> 

to this:

<a onclick="$(this).toggleclass('toggleoffbutton');" data-role="button" class="toggleonbutton" id='togglebutton' data-corners="true" data-mini="false" data-theme="a" tabindex="2"/></a>        

also give text.

and omar told in comments don't need:

<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" /> 

if have these files:

<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.1.min.css" /> <link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.1.min.css" /> 

Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -