javascript - 在 Firefox 和 IE 中的 MVC 部分 View 上进行 ajax 更新后，jQuery 日期选择器无法工作

Question

我有一个 MVC View ，其中有一个 div 容器，我通过 ajax 更新它。

<div id="PartialContainer"></div>

<script type="text/javascript">
$.ajax({
        url: '/my/partial_action',
        success: function(result) {
            $("#PartialContainer").html(result);
        }
    });

</script>

Controller 操作代码:

public ActionResult partial_action()
{
    return PartialView("_MyPartial");
}

最后，_MyPartial View :

<input type="text" class="datepicker" />

<script type="text/javascript">
    $(function() {
        alert("before");
        $("input.datepicker").datepicker();
        alert("after");
    });
</script>

问题: 这在 Chrome 中工作得很好，我得到了日期选择器下拉菜单，两个警报(之前和之后)都显示。然而，在 FF 和 IE 中，日期选择器不起作用。我确实收到了两个警报，但没有收到日期选择器行为。没有 firebug/F12 脚本错误。

我尝试在部分 View 之外添加日期选择器输入，并且它在所有浏览器中运行良好。

我正在使用 jQuery ui 1.7.2、mvc 4。

有人知道为什么会发生这种情况吗？

编辑:所以我解决了这个问题，这不是一个javascript问题，而是样式问题。我在 Twitter 引导对话框中使用日期选择器，它覆盖了日期选择器。更改一些 z 索引为我解决了这个问题。

Answer 1

尝试删除 $.ready 调用并将其替换为 IIFE，因此您的代码将如下所示:

<input type="text" class="datepicker" />

<script type="text/javascript">
    (function() {
        alert("before");
        $("input.datepicker").datepicker();
        alert("after");
    })();
</script>

编辑:我现在已经检查过，两种情况都可以在 FF 13、IE 9、Opera 12 和 Safari 5 中按预期工作。但是 IE 似乎缓存了结果，可能是这样问题。尝试在您的网址中添加一些随机参数或将 cache: false (默认情况下为 true)设置为基页中的 ajax 调用

<div id="PartialContainer"></div>

<script type="text/javascript">
$.ajax({
        url: '/my/partial_action',
        cache: false,
        success: function(result) {
            $("#PartialContainer").html(result);
        }
    });

</script>