在 asp.net mvc 4 中使用带有部分视图的 jQuery

Question

我有一个具有以下布局的视图

父 View 由几个 PartialView 组成，如图所示。其中之一是一个列表，其中每个项目都有一个相应的编辑按钮，该按钮将项目加载到另一个 PartialView 中，但这是通过 ajax 加载到模式对话框引导程序中的。这部分工作正常。

我遇到的问题是没有执行与此模式的控件相关的脚本或 jquery 事件。例如 datepicker 小部件从不显示，无法捕获下拉列表的更改事件，或捕获表单的提交事件或提交按钮的单击事件。 所有脚本都放在主视图中。例如，这是模态提交的事件处理程序：

$(function () {
            $('#myModal form').on('submit', function () {
                console.log("okk");
                clearErrors();
                $.post($(this).attr('action'), $(this).serialize(), function (data, status) {
                    $('#myModal').modal('hide');
                    $("#details").html(data);

                }).error(function (error, status, a, b) {                    
                    $('.modal-body p.body').html(error.responseText);
                });
                return false;
            });
        });

在我的 _Layout.cshtm 中，我包含了必要的脚本（我认为）：

@Scripts.Render("~/js")
        @Scripts.Render("~/bundles/globalization")        
        @RenderSection("scripts", required: false)
    </div>
</body>

“~/js”在哪里：

bundles.Add(new ScriptBundle("~/js").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery-migrate-{version}.js",
                "~/Scripts/bootstrap.js",
                "~/Scripts/bootstrap-datepicker.js",
                "~/Scripts/jquery.validate.js",
                "~/scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/jquery.validate.unobtrusive-custom-for-bootstrap.js",
                "~/Scripts/locales/bootstrap-datepicker.es.js"
                ));

我的脚本和 jQuery 这个对话框可能有什么问题？到目前为止，网站中类似问题的指示对我没有用。

如果代码或插图无法理解，我会尽可能清楚地表达我的耳朵。谢谢

Answer 1

由于部分视图是通过 ajax 加载的，因此您需要在页面上呈现 html 后初始化 datepicker，因此您需要将 datepicker 初始化脚本放入成功函数回调中：

$.post($(this).attr('action'), $(this).serialize(), function (data, status) {
                    $('#myModal').modal('hide');
                    $("#details").html(data);
                    $("#textBoxID").datepicker(); //  initialize datepicker for partial view element here

                })

对于事件，您可以编写委托事件以使其工作，选择局部视图的最近元素，我正在使用局部容器，您将在其中附加局部视图 html：

对于点击事件：

$("#details").on("click","#someButtonId",function(){

// write event code here

})

有关on()的更多详细信息，您可以查看HERE

Answer 2

如果它们是由 ajax 加载的，您可能需要为选择器提供更多上下文。

$(document).on('submit', '#myModal form', function () { ...