Javascript 出现错误的对话框"；未捕获类型错误：无法读取属性'；sdIntContent'；“未定义”的定义；_Javascript_Jquery_Jquery Mobile_Simpledialog

Javascript 出现错误的对话框"；未捕获类型错误：无法读取属性'；sdIntContent'；“未定义”的定义；

javascript jquery jquery-mobile

Javascript 出现错误的对话框"；未捕获类型错误：无法读取属性'；sdIntContent'；“未定义”的定义；,javascript,jquery,jquery-mobile,simpledialog,Javascript,Jquery,Jquery Mobile,Simpledialog,我有一个对话框，我在我所有的内部页面中都使用它，它可以从主页正常工作，但是当第1页开始时，我得到一个错误，上面写着UncaughtTypeError：无法读取undefined的属性“sdIntContent”，对话框不再出现 <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> <scrip

我有一个对话框，我在我所有的内部页面中都使用它，它可以从主页正常工作，但是当第1页开始时，我得到一个错误，上面写着UncaughtTypeError：无法读取undefined的属性“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>


在此处插入标题
//  


第一个按钮


第二个按钮




第一个按钮


第二个按钮


第三个按钮




第一个按钮


第二个按钮




第一个按钮


第二个按钮




第一个按钮


第二个按钮




第一个按钮


第二个按钮

您的代码中有以下错误

您使用的是

按钮

而不是导航栏中的

标记。正确的语法如下所示：

<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'应该是唯一的

这是第三方库问题（simpledialog2）.是的，我已经研究过了，但我不知道如何修复或如何使其工作。有什么想法吗？为什么不使用jQM对话框？我尝试过，但无法运行，所以我用了另一种方法，但如果无法运行，那么可能我将不得不运行jQM对话框。没有其他方法可以绕过导航栏中的无法读取属性“sdIntContent”错误，您正在使用

按钮

标记非锚定

。使用锚，它的工作