对话框出现错误“ 未捕获的类型错误: 无法读取未定义的属性'sdIntContent'”
dialog box with error " Uncaught TypeError: Cannot read property 'sdIntContent' of undefined "
我有一个对话框,我在所有内部页面中使用它,它在主页上工作正常,但是当页面 1 启动时,我收到一个错误,说未捕获的类型错误:无法读取未定义的属性"sdIntContent",并且对话框不再出现
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css">
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css">
<script type="text/javascript">//<![CDATA[
$(document).on('pageinit', '#home', function(){
$(document).on ('click','#firstbutton', function () {
$('#footerdialog').simpledialog2({themeDialog: 'c'});
});
$(document).on('click','#first',function () {
window.location.href = "#first";
$('#footerdialog').simpledialog2('close');
});
$(document).on('click','#second',function () {
window.location.href = "#second";
$('#footerdialog').simpledialog2('close');
});
});//]]>
</script>
<!--script type="text/javascript">//<![CDATA[
$(document).on('pageinit', '#home', function(){
$(document).on ('click','#secondbutton', function () {
$.mobile.changePage('#secondpage', {
transition: 'slideup',
changeHash: true,
role: 'dialog'
});
});
$(document).on('click','#third',function () {
window.location.href = "#third";
});
$(document).on('click','#fourth',function () {
window.location.href = "#fourth";
});
});//]]>
</script-->
</head>
<body>
<div data-role="page" id="home">
<div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c">
<div data-role="navbar" data-theme="c">
<ul>
<li>
<button id="firstbutton" data-rel="dialog" data-corners="false" data-theme="c">first button</button>
</li>
<li>
<button id="secondbutton" data-rel="dialog" data-corners="false" data-theme="c">second button</button>
</li>
</ul>
</div>
</div>
</div>
<div data-role="dialog" id="firstpage" data-theme="a" data-corners="false" class="ui-dialog my-dialog ui-dialog-contain">
<div data-role="content">
<a href="#" id="first" data-role="button" data-icon="false" style="color: white; background:red;">first</a>
<a href="#" id="second" data-role="button" data-icon="false" style="color: white; background:red;">second</a>
</div>
</div>
<div data-role="dialog" id="secondpage" data-theme="a" >
<div data-role="content">
<a href="#" id="third" data-role="button" data-icon="false" style="color: White; background:green;">third</a>
<a href="#" id="fourth" data-role="button" data-icon="false" style="color: White; background:green;">fourth</a>
</div>
</div>
<div id="footerdialog" style="display:none" data-options='{"mode":"blank","headerText":"Dialog","headerClose":false,"blankContent":true}'>
<div style="padding: 15px;">
<ul>
<li>
<button id="first" data-corners="false" data-theme="c">first button</button>
</li>
<li>
<button id="second" data-corners="false" data-theme="c">second button</button>
</li>
<li>
<button id="third" data-corners="false" data-theme="c">third button</button>
</li>
</ul>
</div>
</div>
<div data-role="page" id="first" data-theme="c" data-transition="slideup">
<div data-role="header" ></div>
<div data-role="content" style="text-align: center;" data-theme="c" data-inline="true">
<div>
<input type="text" id="second" placeholder="first page">
<div class="ui-grid-a">
<div class="ui-block-a">
<div data-role="fieldcontain" align="right">
<a style="width:25%" data-role="button" id="first" href="#">first</a>
</div>
</div>
<div class="ui-block-b">
<div data-role="fieldcontain" align="left">
<a style="width:25%" data-role="button" id="esecond" href="#">second</a>
</div>
</div>
</div>
<div class="ui-grid-c">
<div class="ui-block-a">
<a href="#" data-role="button" data-icon="false" style="color: White; background:green;">first</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-icon="false" style="color: Black; background:yellow;">second</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-icon="false" style="color: white; background:black;">third</a>
</div>
<div class="ui-block-d">
<a href="#" data-role="button" data-icon="false" style="color: White; background:red;">fourth</a>
</div>
</div>
</div>
<div data-role="content" id="home">
<div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c">
<div data-role="navbar" data-theme="c">
<ul>
<li>
<button id="firstbutton" data-corners="false" data-theme="c">first button</button>
</li>
<li>
<button id="secondbutton" data-corners="false" data-theme="c">second button</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div data-role="page" id="second" data-theme="c" data-transition="slideup">
<div data-role="header" ></div>
<div data-role="content" style="text-align: center;" data-theme="c" data-inline="true">
<div>
<input type="text" id="second" placeholder="Second Page">
<div class="ui-grid-a">
<div class="ui-block-a">
<div data-role="fieldcontain" align="right">
<a style="width:25%" data-role="button" id="first" href="#">first</a>
</div>
</div>
<div class="ui-block-b">
<div data-role="fieldcontain" align="left">
<a style="width:25%" data-role="button" id="esecond" href="#">second</a>
</div>
</div>
</div>
<div class="ui-grid-c">
<div class="ui-block-a">
<a href="#" data-role="button" data-icon="false" style="color: White; background:green;">first</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-icon="false" style="color: Black; background:yellow;">second</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-icon="false" style="color: white; background:black;">third</a>
</div>
<div class="ui-block-d">
<a href="#" data-role="button" data-icon="false" style="color: White; background:red;">fourth</a>
</div>
</div>
</div>
<div data-role="content" id="home">
<div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c">
<div data-role="navbar" data-theme="c">
<ul>
<li>
<button id="firstbutton" data-corners="false" data-theme="c">first button</button>
</li>
<li>
<button id="secondbutton" data-corners="false" data-theme="c">second button</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div data-role="page" id="third" data-theme="c" data-transition="slideup">
<div data-role="content" style="text-align: center;" data-theme="c" data-inline="true">
<div>
<input type="text" id="second" placeholder="third page">
<div class="ui-grid-a">
<div class="ui-block-a">
<div data-role="fieldcontain" align="right">
<a style="width:25%" data-role="button" id="first" href="#">first</a>
</div>
</div>
<div class="ui-block-b">
<div data-role="fieldcontain" align="left">
<a style="width:25%" data-role="button" id="esecond" href="#">second</a>
</div>
</div>
</div>
<div class="ui-grid-c">
<div class="ui-block-a">
<a href="#" data-role="button" data-icon="false" style="color: White; background:green;">first</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-icon="false" style="color: Black; background:yellow;">second</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-icon="false" style="color: white; background:black;">third</a>
</div>
<div class="ui-block-d">
<a href="#" data-role="button" data-icon="false" style="color: White; background:red;">fourth</a>
</div>
</div>
</div>
<div data-role="content" id="home">
<div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c">
<div data-role="navbar" data-theme="c">
<ul>
<li>
<button id="firstbutton" data-corners="false" data-theme="c">first button</button>
</li>
<li>
<button id="secondbutton" data-corners="false" data-theme="c">second button</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div data-role="page" id="fourth" data-theme="c" data-transition="slideup">
<div data-role="content" style="text-align: center;" data-theme="c" data-inline="true">
<div>
<input type="text" id="second" placeholder="fourth page">
<div class="ui-grid-a">
<div class="ui-block-a">
<div data-role="fieldcontain" align="right">
<a style="width:25%" data-role="button" id="first" href="#">first</a>
</div>
</div>
<div class="ui-block-b">
<div data-role="fieldcontain" align="left">
<a style="width:25%" data-role="button" id="esecond" href="#">second</a>
</div>
</div>
</div>
<div class="ui-grid-c">
<div class="ui-block-a">
<a href="#" data-role="button" data-icon="false" style="color: White; background:green;">first</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-icon="false" style="color: Black; background:yellow;">second</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-icon="false" style="color: white; background:black;">third</a>
</div>
<div class="ui-block-d">
<a href="#" data-role="button" data-icon="false" style="color: White; background:red;">fourth</a>
</div>
</div>
</div>
<div data-role="content" id="home">
<div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" data-theme="c">
<div data-role="navbar" data-theme="c">
<ul>
<li>
<button id="firstbutton" data-corners="false" data-theme="c">first button</button>
</li>
<li>
<button id="secondbutton" data-corners="false" data-theme="c">second button</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
代码中有以下错误。
-
你在导航栏中使用的是
button
而不是a
标记。正确的语法如下:<div data-role="navbar" data-theme="c"> <ul> <li> <a href="#firstpage" data-rel="dialog" data-corners="false" data-theme="c">first button</a> </li> <li> <a href="#secondpage" data-rel="dialog" data-corners="false" data-theme="c">second button</a> </li> </ul> </div>
-
您已经为多个元素提供了相同的
id
,id
s' 应该是唯一的。
演示
相关文章:
- webRTC错误未定义配置
- gmaps4rails 2.4.6未捕获引用错误:未定义Gmaps
- 未捕获引用错误:未定义validateform
- 为什么我会出现此错误"未捕获引用错误:未定义标题;
- Sitecore”;未捕获引用错误:未定义MultilistWithSearch;
- Wordpress:未捕获引用错误:未定义速度
- Node.js引用错误:未定义类名
- Replace()产生“;未捕获的类型错误:未定义的不是函数“;当与零一起使用时
- 错误-未定义easeInBounce
- 未捕获的引用错误:未定义<映射键>
- 未捕获的类型错误:未定义不是上的函数.GetElementByID
- Javascript错误:未捕获引用错误:未定义编辑
- javascript onchange取消绑定错误|未定义
- requirejs优化器错误:未定义窗口
- 未捕获引用错误:未定义PrintThisPage
- JSHint 错误:未定义我的应用程序 (W117)
- 当我编写脚本时,它显示引用错误:未定义宽度
- socket.io - 引用错误:未定义 io
- 反应.js:未捕获类型错误:未定义不是一个函数
- 出现“未捕获的类型错误:未定义不是函数”控制台错误