jQuery对话框在ajax部分视图重新加载后不工作

我正在操纵View中的数据表。当用户点击数据名称时，会弹出一个对话框让他编辑数据。当他点击，删除，一个对话框会提示他确认，然后删除该行。当他选择创建新的行时，会弹出一个对话框让他输入新的信息。在所有3种情况下，动作完成后，PartialView“_Content”将重新加载内容<div />。jQuery对话框在ajax部分视图重新加载后不工作

这一切都工作正常，第一次，整个页面加载后。但是在部分视图重新加载之后（在其中一个动作之后），“编辑”对话框不再起作用，尽管其他2个可以。当然，我可以在页面重新加载每一个动作之后的所有内容，但这样做比较慢，在Ajax世界中没有意义。如果我将编辑对话框的JQueryUIHelper放在局部视图中，它又是第一次，但是第二次，表单在页面上内联打开，而不是在对话框中打开。我也尝试过直接使用JQuery和JQueryUI，并得到相同的错误。我一直在研究这一点，并试验了几天。

UPDATED 4/1/13：*我在链接类中添加了一些$.click()回调函数。在页面进行部分刷新后，它们不起作用。我猜想发生的情况是，当内容重新加载时，脚本与内容<div>中的对象失去了“连接”。

我通过JQueryUIHelper扩展使用MVC4，Razor和JQueryUI。 View和PartialView的代码如下。

有什么想法吗？

这里是我查看

@model IEnumerable<AttributeLookup> 
@{ 
ViewBag.Title = "Attributes"; 
} 
<h2> 
Attributes</h2> 
@if (ViewBag.Error != null) 
{ 
<div class="message-error">@ViewBag.Error</div> 
} 
<div id="content"> 
    @Html.Partial("_Content", Model) 
</div> 

<div style="padding-top: 12px;"> 
@Ajax.ActionLink("New", "Create", new { }, new AjaxOptions { 
    HttpMethod = "Get", 
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "createContent" 
}, new { id = "createLink" }) 
</div> 

@using (Html.JQueryUI().Begin(new Dialog() 
.Title("Confirm Delete") 
.AutoOpen(false) 
.Modal(true) 
.CloseOnEscape(true) 
.ConfirmAjax(".deleteLink", "Yes", "No", 
new AjaxSettings { Method = HttpVerbs.Post, Success = "content" }))) 
{ 
<div> 
    Are you sure you want to delete this attribute? 
</div> 
} 
@using (Html.JQueryUI().Begin(new Dialog() 
.Title("Create Attribute") 
.AutoOpen(false) 
.Width(500) 
.TriggerClick("#createLink") 
.Modal(true) 
.CloseOnEscape(true) 
.Button("OK", "save") 
.Button("Cancel", "closeDialog"))) 
{ 
<div id="createContent" /> 
} 
@using (Html.JQueryUI().Begin(new Dialog(new {id = "editDialog"}) 
.Title("Edit Attribute") 
.AutoOpen(false) 
.Width(500) 
.TriggerClick(".editLink") 
.Modal(true) 
.CloseOnEscape(true) 
.Button("OK", "save") 
.Button("Cancel", "closeDialog"))) 
{ 
<div id="editContent" /> 
} 

@section Scripts { 
    <script type="text/javascript"> 

    var success = function(data) { 
    $(window.document.body).html(data); 
    }; 

    var content = function(data) { 
    $("#content").html(data); 
    }; 

    var closeDialog = function() { 
    $(this).dialog('close'); 
    }; 

     var saveCreate = function() { 
     $("#createForm").submit(); 
     $(this).dialog('close'); 
     }; 

     var saveEdit = function() { 
     $("#editForm").submit(); 
     $(this).dialog('close'); 
     }; 

     $(".editLink").click(function() { alert("edit clicked"); }); 
     $(".deleteLink").click(function() { alert("delete clicked"); }); 

    </script> 
}

这里的PartialView

@model IEnumerable<AttributeLookup> 
@if (ViewBag.Error != null) 
{ 
<div class="message-error">@ViewBag.Error</div> 
} 
<table id="attribute"> 
<tbody> 
    <tr> 
    <th style="width: 250px;"> 
     @Html.DisplayNameFor(model => model.Name) 
    </th> 
    <th style="width: 50px;"> 
     @Html.DisplayNameFor(model => model.Units) 
    </th> 
    <th style="width: 30px;"> 
     Contrained 
    </th> 
    <th style="width: 400px;"> 
     @Html.DisplayNameFor(model => model.Description) 
    </th> 
    <th> 
     &#160; 
    </th> 
    </tr> 
    @{ int count = 0; } 
    @foreach (var item in Model) 
    { 
    string type = count % 2 == 0 ? "normal" : "alt"; 
    <tr class="@type"> 
     <td> 
     @Ajax.ActionLink(@Html.DisplayFor(modelItem => item.Name).ToHtmlString(), "Edit", 
     new { id = item.AttributeLookupID }, new AjaxOptions 
     { 
      HttpMethod = "Get", 
      InsertionMode = InsertionMode.Replace, 
      UpdateTargetId = "editContent" 
     }, new { @class = "editLink", title = "Edit attribute" }) 
     </td> 
     <td> 
     @Html.DisplayFor(modelItem => item.Units) 
     </td> 
     <td> 
     @if (item.AttributeConstraints != null && item.AttributeConstraints.Any()) 
     { 
      @Html.Raw("X") 
     } 
     </td> 
     <td> 
     @Html.DisplayFor(modelItem => item.Description) 
     </td> 
     <td> 
     @Html.ActionLink("Delete", "Delete", new { id = item.AttributeLookupID }, new { @class = "deleteLink" }) 
     </td> 
    </tr> 
     count++; 
    } 
</tbody> 
</table>

这里的部分编辑表单。创建表单是类似的：

@model AttributeLookup 
@using (Ajax.BeginForm("Edit", "AttributeLookup", new AjaxOptions { 
HttpMethod = "Post", 
InsertionMode = InsertionMode.Replace, 
UpdateTargetId = "content" 
}, new {id = "editForm"})) 
{ 
@Html.ValidationSummary(true) 

<fieldset> 
    <legend>AttributeLookup</legend> 
    @Html.HiddenFor(model => model.AttributeLookupID) 
    <div class="editor-label"> 
    @Html.LabelFor(model => model.Name) 
    </div> 
    <div class="editor-field"> 
    @Html.EditorFor(model => model.Name) 
    @Html.ValidationMessageFor(model => model.Name) 
    </div> 
    <div class="editor-label"> 
    @Html.LabelFor(model => model.Units) 
    </div> 
    <div class="editor-field"> 
    @Html.EditorFor(model => model.Units) 
    @Html.ValidationMessageFor(model => model.Units) 
    </div> 
    <div class="editor-label"> 
    @Html.LabelFor(model => model.Description) 
    </div> 
    <div class="editor-field"> 
    @Html.EditorFor(model => model.Description) 
    @Html.ValidationMessageFor(model => model.Description) 
    </div> 
    <div class="editor-label"> 
    @Html.LabelFor(model => model.AttributeConstraints, "Constraint") 
    </div> 
    <div class="editor-field"> 
    @Html.DropDownList("ConstraintTypeID") 
    @Html.DropDownList("SecondaryID") 
    </div> 
</fieldset> 
}

来源

2013-03-22 Jim Villani

一些更多的证据：我已经添加了这些行了''

我找到了解决方案。首先，我删除从助手的TriggerClick：

@using (Html.JQueryUI().Begin(new Dialog(new {@id = "editDialog"}) 
    .Title("Edit Attribute") 
    .AutoOpen(false) 
    .Width(500) 
    // deleted --> .TriggerClick(".editLink") 
    .Modal(true) 
    .CloseOnEscape(true) 
    .Button("OK", "saveEdit") 
    .Button("Cancel", "closeDialog"))) 
{ 
    <div id="editContent" /> 
}

然后，我明确地把它添加到我的<scripts>：

$("body").on('click', ".editLink", function() { $("#editDialog").dialog("open"); });

现在它工作正常。

来源

2013-04-01 16:03:14

jQuery对话框在ajax部分视图重新加载后不工作

相关问题