0

私のメインビュー：

@Ajax.ActionLink("append smth", "AddSmth", new AjaxOptions { UpdateTargetId = "smthContainer", InsertionMode.InsertAfter })

<div id="smthContainer"></div>

私のコントローラー:

public ActionResult AddSmth()
{
    return PartialView("Smth");
}

部分的なビュー:

<input type="text" id="dateOfSmth" />

<script type="text/javascript">
$(document).ready(function () {
    $('#dateOfSmth').datepicker();
});
</script>

問題は、部分ビューがドキュメントに追加される前に ready 関数が呼び出されるため、$('#dateOfSmth') が空になることです。InsertionMode.InsertAfter を InsertionMode.Replace に置き換えると、すべて正常に動作します。InsertionMode.InsertAfter で正しく起動しない理由がわかりましたか?

EDIT：jQueryでビューを追加するときにうまく機能します：

<a href="javascript:addSmth();"> Add Smth </a>

<script type="text/javascript">
                function addSmth() {
                    $.get('@Html.Raw(Url.Action("AddSmth"))', null, function (view) {
                        $('#smthContainer').append(view);
                    });
                }
</script>
4

2 に答える 2

1

このreadyイベントは、DOM のロードが完了したときに 1 回発生し、AJAX でロードされたコンテンツを挿入したときに再度発生することはありません。それが起こった後にイベントハンドラーを追加すると、ready自動的に実行されます。

InsertionMode.InsertAfterこの問題は、2 つの挿入モード (および- ) がコンテンツ内のタグをInsertionMode.Replace処理する方法の違いによって引き起こされる可能性があります。<script>

可能であれば、次のように呼び出します。

$('#dateOfSmth').datepicker();

AJAX コンテンツが読み込まれた後の行。

于 2012-11-12T11:35:27.143 に答える
1

以下のコードは、jQuery コードベースからのものです。

 // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
    if (!document.body) {
        return setTimeout(jQuery.ready, 1);
    }

したがって、ready イベントは body 要素が作成されるまで待機します。body 要素が作成された後に部分ビューが追加された場合、それが関数の実行が早すぎる理由です。

理論的には、部分ビューがロードされた後にコードを実行するために、同様のことを行うことができます。

function createDatePicker( ) {

    if ( !document.getElementById("dateOfSmth") ) {

        return setTimeout( createDatePicker, 1);
    }

    // do stuff
}
于 2012-11-12T11:14:36.803 に答える