2

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

4

1 回答 1

4

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

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

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

于 2012-09-06T08:44:04.363 回答