我有以下布局视图

I have a View with the following layout

父视图是由几个PartialViews作为ilustrated的图片。其中之一是一个列表，其中每个项目都有相应的编辑按钮，加载的项目到另一个PartialView，但这是通过AJAX加载到一个模态对话框，引导。这部分工作正常。

The parent View is composed of several PartialViews as ilustrated in the picture. One of which is a list where each item has a corresponding Edit button which loads the item into another PartialView, but this is loaded via ajax into a modal dialog-bootstrap. This part works fine.

我的问题是，没有与此相关的模态的控制脚本或jQuery的事件被执行。例如日期选择控件永远不会显示，无法捕捉到下拉列表的变化情况，或捕捉提交事件的形式或提交按钮的点击事件。 所有的脚本都放在主视图。例如，这是事件处理程序的模式提交：

The problem I have is that no script or jquery event related to the controls of this modal gets executed. For example datepicker widget is never displayed, can not capture the change event of the dropdown, or capture the submit event for the form or the click event of Submit button. All the scripts are placed in the main View. for example this is the event handler for the modal submit:

$(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我已经包含了必要的脚本（我认为）：

In my _Layout.cshtm I have included the necessary scripts (I think):

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

，其中〜/ JS是：

where "~/js" is:

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此对话框的问题？从该网站类似的问题适​​应症还没有为我工作至今。

What could be the problem with my scripts and jQuery for this dialog ? Indications from similar questions in the site have not worked for me so far.

我已经试过前preSS尽可能明确，如果有什么不明白的code或我洗耳恭听的插图。谢谢

I have tried to express as clearly as possible if something is not understood the code or the illustrations I'm all ears. Thank you

推荐答案

由于局部视图是通过AJAX加载，你需要初始化日期选择器后，HTML是网页上呈现，所以你需要把成功的回调函数日期选择器初始化脚本：

As Partial View is loaded via ajax you need to initialize datepicker after the html is rendered on page so you need to put datepicker initialization script in success function callback:

$.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：

For events you can write delegated events to make them work,choose the closest element of the partial view, i am using container of partial in which you are appending partial view html:

有关单击事件：

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

// write event code here

})

有关更多detials 在（） 可以看到 这里

For more detials of on() you can see HERE