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
Post a Comment