5

我有一个对话框，我在所有内部页面中都使用它，它在主页上工作正常，但是当第 1 页启动时，我收到一个错误，提示 Uncaught TypeError: Cannot read property 'sdIntContent' of undefined 并且对话框不再出现

<!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>
4

1 回答 1

3

您的代码中有以下错误。

  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对几个元素给出了相同的值，ids' 应该是唯一的。

演示

于 2013-10-29T10:16:04.803 回答