javascript - 对话框错误 "Uncaught TypeError: Cannot read property ' sdIntContent' of undefined "

标签 javascript jquery jquery-mobile simpledialog

我有一个对话框，我在我的所有内部页面中都使用它，它在主页上工作正常，但是当第 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>

最佳答案

您的代码中存在以下错误。

  1. 您在导航栏中使用的是 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>

  2. 您为多个元素指定了相同的 id，id 应该唯一。

    <

Demo

关于javascript - 对话框错误 "Uncaught TypeError: Cannot read property ' sdIntContent' of undefined "，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19653213/

上一篇：javascript - AngularJS 在从 HTTP.JSONP 返回的 JSON 中获取语法错误

下一篇：javascript - 错误 : Argument 'MainCtrl' is not a function, 未定义

相关文章：

javascript - google maps api v3 - javascript - 透视/倾斜(不是卫星!)？

javascript - dotenv API 凭证字符串或不带引号的

javascript - 等待 Action 更新 react-native 和 redux 中的状态

javascript - 如何删除使用 jQuery.bind 创建的事件处理程序？

jquery - 选择一个包含 div 来显示背景图像

javascript - 如何使用 Bootstrap 导航列表自动显示/隐藏元素

javascript - 回到上次滚动位置——jquery移动页面设计

javascript - Firestore云功能。https.onRequest Request.url.split ("/")不起作用

javascript - 未捕获的语法错误 : Unexpected end of JSON input error when i try to take data from mysql

javascript - 在javascript模板中格式化json日期

©2024 IT工具网  联系我们