Question

我的主要观点：

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

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

我的控制器：

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

Smth局部视图：

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

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

问题是在将部分视图添加到文档之前调用就绪函数，因此$（'＃dateOfSmth'）为空。如果我用InsertionMode.Replace替换InsertionMode.InsertAfter，一切正常。你知道为什么不能用InsertionMode.InsertAfter正确地解决这个问题吗？

编辑：使用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>

Answer 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
}

Answer 2

{DOM}加载完成后，ready事件被触发一次 - 并且在插入加载AJAX的内容时不再触发。如果在发生事件后添加ready事件处理程序，那么它将自动执行。

问题可能是两种插入模式（InsertionMode.InsertAfter和InsertionMode.Replace - 处理内容中的<script>标记的差异造成的。

如果可以，只需致电：

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

加载AJAX内容后

行。

文档就绪在部分视图中无法正常工作

2 个答案: