让 ajax 加载的部分视图中的元素触发 jquery 事件（引导模式形式）

Posted 2023-05-07

【中文标题】让 ajax 加载的部分视图中的元素触发 jquery 事件（引导模式形式）

【英文标题】：Getting jquery event to fire for element in ajax loaded partial view (bootstrap modal form)

【发布时间】：2013-05-21 21:42:33

【问题描述】：

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

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

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

调用视图有

<div class="modal hide fade in" id="addclas-s-room">
    <div id="clas-s-room-container"></div>
<div>

<script type="text/javascript">
$(document).ready(function () 
    $('#addclassbtn').click(function () 
        var url = "/Quiz/AddClas-s-room?quizId=@ViewBag.quizid"; 
        $.get(url, function (data) 
            $('#clas-s-room-container').html(data);
            $('#addclas-s-room').modal('show');
        );
    );
);
</script>

控制器：

public ActionResult AddClas-s-room(int quizId)

    var clas-s-room = ...
    return PartialView("_AddClas-s-room",clas-s-room);

局部视图：

@using (Ajax.BeginForm("AddClas-s-room", "Quiz", FormMethod.Post,
                    new AjaxOptions
                    
                        //InsertionMode = InsertionMode.Replace,
                        HttpMethod = "POST",
                        UpdateTargetId = "addclas-s-room"
                    ))
    
        @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>

【参考方案1】：

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

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

【讨论】：

感谢您的回复。这就是我收集的内容，但我尝试过的任何方法都没有奏效。答案原来是这个和这个的组合：***.com/questions/12978254/… 出于我不太明白的原因，我不得不将 .datepickerz-index:1151; 添加到我的 css 中。

嗯，很奇怪。 z-index 修复看起来像 datepicker 隐藏在模式后面。 Bootstrap modal 的 z-index 为 1050，因此 datepicker 被赋予了更高的 z-index 值。