0

我有一个 MVC 视图，它有一个通过 ajax 更新的 div 容器。

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

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

</script>

控制器动作代码：

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

最后，_MyPartial 视图：

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

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

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

我尝试在局部视图之外添加一个日期选择器输入，它在所有浏览器中都运行良好。

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

任何人都知道为什么会这样？

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

4

2 回答 2

2

尝试删除 $.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 似乎缓存了结果，可能是问题所在。尝试在您的 url 中添加一些随机参数或设置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>
于 2012-07-20T15:45:38.950 回答
1

我在使用 Bootstrap Datepicker v1.8.0 时遇到了类似的行为。datepicker 在局部视图的初始显示上按预期工作，但如果使用 Ajax 调用使用新数据刷新局部视图，则 datepicker 无法响应。

通过在重新加载部分视图后将文本字段重新绑定到 Ajax 成功中的日期选择器来解决问题。

function editApplicant(id) {
var dataRow = {
    'applicant' : id
};
$.ajax({
    type: 'POST',
    url: "/Cases/GetApplicant",
    data: dataRow,
    success: function (data) {
        $('#applicantDetail').html(data);
        /* Rebind the date of birth field to a datepicker */
        $('#DOBString').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            orientation: 'bottom left'
        });
        showApplicantView();
    },
    error: function (data) {
        showApplicantView();
    }

});

}

于 2019-06-26T08:20:24.403 回答