Javascript 在部分更新div后运行js脚本

我正在asp.NETMVC4和jQuery2.1.4中使用dialog。 我有像这样的索引页

@model IEnumerable<Osample.Models.Role_Privilege_Map>

@{
    ViewBag.Title = "RolePrivilgeMapping";
}

<script>

    $(document).ready(function () {

        registerEditDialogBox();

         $.ajaxSetup({ cache: false });

         function registerEditDialogBox() {
             $(".editRoleDialog").on("click", function (e) {
                 event.stopPropagation();
                 var url = $(this).attr('href');
                 var $this = $(this);
                 $("#dialog-edit").dialog({
                     title: 'Edit Role',
                     autoOpen: false,
                     resizable: false,
                     height: 150,
                     width: 400,
                     modal: true,
                     draggable: true,
                     open: function (event, ui) {
                         $(this).load(url);

                     },
                     close: function (event, ui) {
                        registerEditDialogBox();
                     }
                 });

                 $("#dialog-edit").dialog('open');
                 return false;
             });
         }
    });

</script>


<div id="heading">
    <h2>Role - Privilge Mapping</h2>
</div>

<div id="RolePrivilgeMappingWrapper">

    <div class="float-left" id="roleWrapper">
        @Html.Partial("_Role", sample.Models.DataProvider.DataProvider.GetRoleNames())
    </div>

</div>

我的角色部分页面是

@model IEnumerable<sample.Models.webpages_Roles>

@{
    ViewBag.Title = "Index";
}

<div class="settingsTable" style="position: relative; width: 100%; margin: 0 auto">

    <div style="width: 50%; margin: 0 auto">
        <div style="width: 50%; margin: 0 auto">
            <h2>Role</h2>
        </div>
    </div>

    <p>
        @Html.ActionLink("Create New Role", "OpenAddRoleDialog", "RolePrivilegeMapping", null, new { @class = "createRole actionHyperLink" })
    </p>
    <table id="tblRole">
        <tr>
            <th>Role ID</th>
            <th>
                @Html.DisplayNameFor(model => model.RoleName)
            </th>
            <th>Action</th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.RoleId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RoleName)
                </td>
                <td>
                    @Html.ActionLink("Edit", "OpenEditRoleDialog", "RolePrivilegeMapping", new { id = item.RoleId }, new { @class = "editRoleDialog actionHyperLink" }) |
                    @Html.ActionLink("Delete", "DeleteRole", "RolePrivilegeMapping", new { id = item.RoleId }, new { @class = "confirmDialog actionHyperLink" }) 
                </td>
            </tr>
        }
    </table>

    <div id="dialog-edit" style="display: none">
    </div>

</div>

@model sample.Models.webpages_Roles


    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")


    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/jqueryUI")

<script type="text/javascript">


    $.validator.unobtrusive.parse(document);

    function roleEditSuccess() {

       // $("#dialog-edit").dialog('close');
    }

</script>
@using (Ajax.BeginForm("EditRole", "RolePrivilegeMapping", 
    new AjaxOptions { HttpMethod = "POST",UpdateTargetId="roleWrapper",OnSuccess="roleEditSuccess" }))
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>webpages_Roles</legend>

        @Html.HiddenFor(model => model.RoleId)

        <div class="editor-label">
            @Html.LabelFor(model => model.RoleName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.RoleName)
            @Html.ValidationMessageFor(model => model.RoleName)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

我的编辑角色部分页面为

@model IEnumerable<sample.Models.webpages_Roles>

@{
    ViewBag.Title = "Index";
}

<div class="settingsTable" style="position: relative; width: 100%; margin: 0 auto">

    <div style="width: 50%; margin: 0 auto">
        <div style="width: 50%; margin: 0 auto">
            <h2>Role</h2>
        </div>
    </div>

    <p>
        @Html.ActionLink("Create New Role", "OpenAddRoleDialog", "RolePrivilegeMapping", null, new { @class = "createRole actionHyperLink" })
    </p>
    <table id="tblRole">
        <tr>
            <th>Role ID</th>
            <th>
                @Html.DisplayNameFor(model => model.RoleName)
            </th>
            <th>Action</th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.RoleId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RoleName)
                </td>
                <td>
                    @Html.ActionLink("Edit", "OpenEditRoleDialog", "RolePrivilegeMapping", new { id = item.RoleId }, new { @class = "editRoleDialog actionHyperLink" }) |
                    @Html.ActionLink("Delete", "DeleteRole", "RolePrivilegeMapping", new { id = item.RoleId }, new { @class = "confirmDialog actionHyperLink" }) 
                </td>
            </tr>
        }
    </table>

    <div id="dialog-edit" style="display: none">
    </div>

</div>

@model sample.Models.webpages_Roles


    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")


    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/jqueryUI")

<script type="text/javascript">


    $.validator.unobtrusive.parse(document);

    function roleEditSuccess() {

       // $("#dialog-edit").dialog('close');
    }

</script>
@using (Ajax.BeginForm("EditRole", "RolePrivilegeMapping", 
    new AjaxOptions { HttpMethod = "POST",UpdateTargetId="roleWrapper",OnSuccess="roleEditSuccess" }))
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>webpages_Roles</legend>

        @Html.HiddenFor(model => model.RoleId)

        <div class="editor-label">
            @Html.LabelFor(model => model.RoleName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.RoleName)
            @Html.ValidationMessageFor(model => model.RoleName)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

因此，流就像

索引中加载了角色 角色表具有编辑操作链接 单击编辑，jquery对话框打开并显示编辑页面 保存时，将使用更新详细信息， UpdateTargetId=roleWrapper

由于角色div的部分更新，当对话框关闭时，我再次应用jquery对话框插件，但出现以下错误

错误：初始化前无法在对话框上调用方法； 试图调用方法“open”

---

如何在这里进行。我遇到了大问题

为什么要在部分页面中呈现脚本？？它们不是在布局中呈现的吗？这是为了让ajax验证工作[$.validator.unobtrusive.parsedocument]我强烈认为这是导致问题的原因之一，因为错误清楚地表明，在初始化对话框之前，您正在尝试调用函数open of dialog。我已按照堆栈溢出中的一篇文章完成了此操作。请尝试更改它，并将所有脚本呈现部分保留在主布局页中！！