1

我试图找出正确的方法来初始化引用通过 ajax 加载的部分视图元素的 jquery 事件。具体来说，我正在尝试以引导模式形式使用 bootstrap-datepicker.js。

背景：有一个运行日期选择器的功能页面。今天的项目是将这种形式转换为引导模式。我所做的很多事情都来自MVC 4 Edit modal form using Bootstrap

一切正常。由于我现在正在通过 ajax 加载部分视图，因此 datepicker 不起作用。我明白这个问题，我只是不知道解决方案。任何建议表示赞赏。

调用视图有 

<div class="modal hide fade in" id="addclassroom">
    <div id="classroom-container"></div>
<div>

<script type="text/javascript">
$(document).ready(function () {
    $('#addclassbtn').click(function () {
        var url = "/Quiz/AddClassroom?quizId=@ViewBag.quizid"; 
        $.get(url, function (data) {
            $('#classroom-container').html(data);
            $('#addclassroom').modal('show');
        });
    });
});
</script>

控制器： 

public ActionResult AddClassroom(int quizId)
{
    var classroom = ...
    return PartialView("_AddClassroom",classroom);
}

局部视图： 

@using (Ajax.BeginForm("AddClassroom", "Quiz", FormMethod.Post,
                    new AjaxOptions
                    {
                        //InsertionMode = InsertionMode.Replace,
                        HttpMethod = "POST",
                        UpdateTargetId = "addclassroom"
                    }))
    {
        @Html.ValidationSummary()
        @Html.AntiForgeryToken()
        <div class="modal-body">
            <fieldset class="QuizDisplayFields">
                *fields...etc*
                @Html.TextBoxFor(model => model.StartDate, new {@class="datefield" })
                @Html.ValidationMessageFor(model => model.StartDate)
                *more fields...*
                <input type="submit" class = "btn btn-primary" value="Save" />
            </fieldset>
        </div>
    }

<link href="~/Content/datepicker.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-datepicker.js"></script>

   <script>
    $(document).ready(function () {
        $("#StartDate").datepicker();
    });
   </script>
   <script>
       $(function ($) {
           $("#StartDate").on("click").datepicker();
       });
   </script>
4

1 回答 1

2

$(document).ready不会部分工作。它仅在最初加载页面时执行。

因此，您需要将这些脚本在部分内部转移到您的 ajax 调用的回调函数中。

于 2013-05-27T10:42:46.317 回答