0

我今天在这里讨论跨浏览器问题。我的代码在 Chrome 和 Firefox 上完美呈现，但在 IE 上呈现空白页面。

每当我在 IE 中调试时，都会在 jQuery 代码片段上触发一个错误，显示“$ 未定义”或“需要对象”。

在此处输入图像描述

设置：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jquery.ui.datepicker.mobile.css"></link>
<script src="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jQuery.ui.datepicker.js"></script>
<script src="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script>

这是触发错误的 jQuery 片段之一：

$(function(){
    $("#accordionDemo").accordion({
        header : "h3",
        active: false,
        alwaysOpen:false,
        fillSpace:false,
        collapsible:true,
    });
});

html相当简单。我只是在正文中使用一个脚本，例如 $('#home').append('<div id="accordionDemo"><b>Sample Code</b></div>');

顺便说一句，我在 div 中有代码。我只是写了示例代码作为占位符。

我对 jQuery 有点陌生，但我认为我缺少一些简单的东西。但是，我真的找不到问题所在。请帮帮我。如果我必须在我的问题中包含更多细节，请告诉我。谢谢你这么。

更新 这是完整的代码。为了安全起见，我更改了变量名。我还删除了一些部分并对其进行了压缩，但是，主要的要点/布局仍然存在。

<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1" charset ="UTF-8">
        <title>Handshake Protocol</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script type="text/javascript">
            //reset type=date inputs to text
            $( document ).bind( "mobileinit", function(){
                $.mobile.page.prototype.options.degradeInputs.date = true;
            }); 
        </script>
        <link rel="stylesheet" type="text/css" href="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jquery.ui.datepicker.mobile.css"></link>
        <script src="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jQuery.ui.datepicker.js"></script>
        <script src="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script>
        <script type="text/javascript">
            var i=0;
            var xmlFinal;
            var accordianHtml="";
            var accordianHtmlStart='<div id="accordionDemo">';
            var accordianHtmlEnd="</div>";

            $(function(){
                $("#accordionDemo").accordion({
                    header : "h3",
                    active: false,
                    alwaysOpen:false,
                    fillSpace:false,
                    collapsible:true
                });
            });

            $(xmld).find('dummymain').each(function(){ //i am getting this xml file off the net, i have hidden the link for security reasons

                accordianHtml += '<h3>'+dummyname+'</h3><div>';
                accordianHtml += "<button data-inline='true' data-mini='true' data-role='button'>Start</button>";
                accordianHtml += "<button data-inline='true' data-mini='true' data-role='button'>Stop</button>";
                accordianHtml += "</div>";
            });

            var accordianHtmlFinal = accordianHtmlStart + accordianHtml + accordianHtmlEnd;
        </script>
    </head>
    <body>
        <div data-role="page" id="home">
            <script>
                $('#home').append('<div data-role="header" id="header"> <h1>dummy Dashboard</h1> </div>');
                $('#home').append(accordianHtmlFinal);
                $('#home').append('<input type="button" value="Save" onlick="send2dummyServer()"/>');
            </script>
        </div>
    </body>
</html>
4

3 回答 3

2 
$('#home').append('<div id="accordionDemo"><b>Sample Code</b></div>');

注意引号。

于 2013-06-18T14:50:38.377 回答
0

正如@BradM 所指出的，在collapsible:true. 虽然这在某些浏览器中是可以接受的，但它在语法上是不正确的，因此被 IE 拒绝。

由于您有语法错误，$因此未正确加载，因此尝试访问它是错误的。

于 2013-06-18T14:49:55.613 回答
0

您需要在文档就绪事件中执行您的 jquery 代码，否则您无法保证 JQuery 框架已正确加载。

$( document ).ready(function() {
    $('#home').append('<div id="accordionDemo"><b>Sample Code</b></div>');
});

请参阅此处了解更多信息。

于 2013-06-18T14:46:46.800 回答