Question

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

背景：有一个正常运行的页面，其中有datepicker工作。今天的项目是将该表单转换为引导模式。我做的很多事都来自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>

Answer 1

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

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

在ajax加载的局部视图中获取jquery事件以触发元素（bootstrap模态形式）

1 个答案: