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を1回インストールすると、標準の更新プログラムをインストールするとエラーが消え、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 に答える