为什么这个 DateTimePicker 脚本会导致 IE6 和 IE7 无法加载页面答案

【问题标题】：Why does this DateTimePicker script cause IE6 and IE7 not to load page为什么这个 DateTimePicker 脚本会导致 IE6 和 IE7 无法加载页面
【发布时间】：2012-09-06 03:40:17
【问题描述】：

我在一个 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 脚本的页面上的问题。我有很多页面都包含类似且更复杂的脚本，但没有任何问题。

【问题讨论】：

标签： javascript jquery asp.net-mvc-3 internet-explorer internet-explorer-7

【解决方案1】：

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

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

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

【讨论】：