Question

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

每当我在IE中调试时，都会在jQuery代码段上触发一个错误，该错误代表“$ is undefined”或“Object Expected”。

enter image description here

设定：

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

Answer 1

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

注意引号。

Answer 2

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

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

See here了解更多信息。

Answer 3

正如@BradM指出的那样，collapsible:true之后还有一个额外的逗号。虽然在某些浏览器中可以容忍这种情况，但它在语法上是不正确的，因此被IE拒绝。

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

网页在IE中呈现空白

3 个答案: