Question

我在asp.net MVC 3网站上有几页导致IE6和7在加载菜单后提示“无法加载页面”。我已经能够将其解决到以下DateTimePicker脚本：

<script type="text/javascript">
$('#StartDateTime').datetimepicker({
    onClose: function(dateText, inst) {
        var endDateTextBox = $('#EndDateTime');
        if (endDateTextBox.val() != '') {
            var testStartDate = new Date(dateText);
            var testEndDate = new Date(endDateTextBox.val());
            if (testStartDate > testEndDate)
                endDateTextBox.val(dateText);
        }
        else {
            endDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        var start = $(this).datetimepicker('getDate');
        $('#EndDateTime').datetimepicker('option', 'minDate', new Date(start.getTime()));
    }
});
$('#EndDateTime').datetimepicker({
    onClose: function(dateText, inst) {
        var startDateTextBox = $('#StartDateTime');
        if (startDateTextBox.val() != '') {
            var testStartDate = new Date(startDateTextBox.val());
            var testEndDate = new Date(dateText);
            if (testStartDate > testEndDate)
                startDateTextBox.val(dateText);
        }
        else {
            startDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        var end = $(this).datetimepicker('getDate');
        $('#StartDateTime').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
    }
});
</script>

我相信这是它抛出的错误：

HTML解析错误：无法修改父容器元素在子元素关闭之前

现在我已经解决了这个问题，但是我想知道为什么它首先发生？这是某个版本的IE中的错误吗？我注意到在IE7的一次安装中，如果安装标准更新，则错误消失，有些人说他们在IE8上有错误。

基本上这个问题是我的MVC布局页面如下所示：

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
<section>
    @RenderBody()
</section>
<footer>
</footer>
</body>
</html>

有问题的网页包含以下内容：

<h2>Test</h2>
<form action="/Home/Test" data-ajax="true" data-ajax-loading="#loading-progress"
 data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#results"
 id="form0" method="post">

    Start Time
    <br />
    <input data-val="true" data-val-required="The StartDateTime field is required."
     id="StartDateTime" name="StartDateTime" type="text" value="" />
    <br />

    End Time
    <br />
    <input data-val="true" data-val-required="The EndDateTime field is required."
     id="EndDateTime" name="EndDateTime" type="text" value="" />    <br />
    <br />

    <input type="submit" value="Search" />
    <img id="loading-progress" src="../../Content/images/ajax-loader.gif" alt="loading"/>
</form>

<div id="results"></div>

后面是上面的脚本。因此，带有脚本的页面将在<section>标记内呈现。

要解决这个问题，所有需要做的就是将form与script分开，这样我所做的就是渲染@RenderBody()中的表单，如下所示和脚本在@RenderSection("Scripts")。

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
<section>
    @RenderBody()
</section>
<footer>
</footer>
@RenderSection("scripts", false)
</body>
</html>

所以这解决了问题，但为什么呢？是否需要在脚本之前关闭<section>标记？更有趣的是，这只是带有DateTimePicker脚本的页面上的问题。我有许多页面具有类似且更复杂的脚本，没有任何问题。

Answer 1

您应该在DOM完成后执行该代码。将您的代码封装在：

中

$(function () {
    // your code here
});

http://api.jquery.com/ready/

为什么这个DateTimePicker脚本导致IE6和IE7不加载页面

1 个答案: