아약스 부분보기 다시로드 후 JQuery 대화 상자가 작동하지 않습니다.

Question

보기에서 데이터 표를 조작하고 있습니다. 사용자가 데이터 이름을 클릭하면 대화 상자가 팝업되어 데이터를 편집 할 수 있습니다. 그가 클릭하거나 삭제할 때 대화 상자가 확인 메시지를 표시 한 다음 행을 삭제합니다. 그가 새 행을 만들 때 대화 상자가 팝업되어 새로운 정보를 입력 할 수 있습니다. 모든 3 가지 경우에 작업이 완료된 후 PartialView "_Content"가 콘텐츠 <div />을 다시로드합니다.

전체 페이지가로드 된 후이 모든 것이 정상적으로 작동합니다. 그러나 PartialView가 다시로드 된 후 (동작 중 하나 이후) 다른 "편집"대화 상자는 더 이상 작동하지 않지만 다른 작업은 수행됩니다. 물론 각 액션 후에 모든 것을 다시로드하는 페이지를 조작 할 수는 있지만 Ajax 세상에서는 더 느리고 이해가되지 않습니다. 부분 뷰에 편집 대화 상자의 JQueryUIHelper를 다시 추가하면 처음에는 작동하지만 두 번째에는 양식이 대화 상자가 아닌 페이지에서 인라인으로 열립니다. 나는 또한 JQuery와 JQueryUI를 사용하여 직접 시도해 보았고 같은 오류가 발생했다. 나는 이것을 연구하고 며칠 동안 실험 해왔다.

업데이트 4/1/13 : * 링크 클래스에 $.click() 콜백을 추가했습니다. 페이지가 부분 새로 고침을 마친 후에는 작동하지 않습니다. 무슨 일이 일어 났는지는 콘텐츠가 다시로드 될 때 콘텐츠<div>에있는 개체에 대한 스크립트가 "연결"을 잃어 버리는 것 같습니다.

JQueryUIHelper 확장을 통해 MVC4, Razor 및 JQueryUI를 사용하고 있습니다. 보기 및 부분보기에 대한 코드는 다음과 같습니다.

아이디어가 있습니까?

여기 여기에 편집 양식에 대한 부분이다 여기 내보기

@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> 
} 

최근 질문

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 관련 문제

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.