一起使用jQuery和ASP.NET MVC。 Ajax文章不起作用？

Question

我有一個表格提交AJAX後。它工作正常。

但是，當我通過點擊delete link刪除該項目，我有一個問題，一個獲取請求不發佈。

但從我的javascript函數，你可以看到我使用jQuery的CSS選擇器來檢測鏈接點擊或不，所以我很困惑。

這裏是我的代碼

我的控制器：

public class SessionsController : Controller 
{ 
    private SessionRepository _repository; 

    public SessionsController() : this(new SessionRepository()) { } 

    public SessionsController(SessionRepository repository) 
    { 
     _repository = repository; 
    } 

    public ActionResult Index() 
    { 
     var sessions = _repository.FindAll(); 

     //for ajax requests, we simply need to render the partial 
     if (Request.IsAjaxRequest()) 
      return PartialView("_sessionList2", sessions); 
      //return View("_sessionList", sessions); 

     return View(sessions); 
    } 

    [HttpPost] 
    public ActionResult Add(Session session) 
    { 
     _repository.SaveSession(session); 

     if (Request.IsAjaxRequest()) 
      return Index(); 

     return RedirectToAction("index"); 
    } 

    [HttpPost] 
    public ActionResult Remove(Guid session_id) 
    { 
     _repository.RemoveSession(session_id); 

     return RedirectToAction("index"); 
    } 

} 

的會話視圖：

@model IEnumerable<MyMVCDemo.Models.Session> 


<h2>Hijax Technique</h2>  

<div id="session-list">   
    @{Html.RenderPartial("_sessionList2");} 
</div> 

<p> 
</p> 

@using (Html.BeginForm("add", "sessions", FormMethod.Post, new { @class = "hijax" })) 
{ 
<fieldset> 
    <legend>Propose new session</legend> 
    <label for="title">Title</label> 
    <input type="text" name="title" /> 

    <label for="description">Description</label>  
    <textarea name="description" rows="3" cols="30"></textarea> 

    <label for="level">Level</label> 
    <select name="level"> 
     <option selected="selected" value="100">100</option> 
     <option value="200">200</option> 
     <option value="300">300</option> 
     <option value="400">400</option>   
    </select> 

    <br /> 
    <input type="submit" value="Add" /> 
    <span id="indicator" style="display:none"><img src="../../content/load.gif" alt="loading..." /></span> 
</fieldset> 

} 

<label> 
    <input type="checkbox" id="use_ajax" /> 
    Use Ajax? 
</label> 

<script src="../../Scripts/Common.js" type="text/javascript"></script> 

我的局部視圖：

@model IEnumerable<MyMVCDemo.Models.Session> 

<table id="sessions"> 
<tr> 
    <th>Title</th> 
    <th>Description</th> 
    <th>Level</th> 
    <th></th> 
</tr> 

@if(Model.Count() == 0) { 
<tr> 
    <td colspan="4" align="center">There are no sessions. Add one below!</td> 
</tr> 
} 

@foreach (var session in Model) 
{ 

    <tr> 
     <td>@session.Title</td> 
     <td>@session.Description</td> 
     <td>session.Level</td> 
     <td> 
      @Html.ActionLink("remove", "remove", new { session_id = session.Id }, new { @class = "delete" }) 
     </td> 
    </tr> 

} 

這是我javascript調用其中的AJAX後：

  $('.delete').click(function() { 
    if (confirm('Are you sure you want to delete this item?')) { 
     $.ajax({ 
      url: this.href, 
      type: 'POST', 
      success: function (result) { 
       $("#session-list").html(result); 
      } 
     }); 

     return false; 
    } 
    return false; 
}); 
    $("form.hijax").submit(function (event) { 
    if ($("#use_ajax")[0].checked == false) 
     return; 

    event.preventDefault(); //prevent the actual form post 
    hijack(this, update_sessions, "html"); 
}); 

function hijack(form, callback, format) { 
    $("#indicator").show(); 
    $.ajax({ 
     url: form.action, 
     type: form.method, 
     dataType: format, 
     data: $(form).serialize(), 
     completed: $("#indicator").hide(), 
     success: callback 
    }); 
} 
function update_sessions(result) { 
    //clear the form 
    $("form.hijax")[0].reset(); 

    //update the table with the resulting HTML from the server 
    $("#session-list").html(result); 
    $("#message").hide().html("session added") 
      .fadeIn('slow', function() { 
       var e = this; 
       setTimeout(function() { $(e).fadeOut('slow'); }, 2000); 
      }); 
} 

Answer 1

它看起來像你對我在更新部分後不重新綁定click事件。

發生什麼事是您在進行ajax調用時替換DOM（事件綁定的）。所以更新後，表單中的所有事件都消失了。

在jQuery中有一個現場活動，可以幫助你在這裏。

下面的代碼沒有經過測試，可能會有一些問題，但它應該給你一個想法。

var sessionList = $('#session-list'); 
$('.delete', sessionList).live('click', function() { 
    if (confirm('Are you sure you want to delete this item?')) { 
     $.ajax({ 
      url: this.href, 
      type: 'POST', 
      success: function (result) { 
       sessionList.html(result); 
      } 
     }); 

     return false; 
    } 
    return false; 
}); 

選擇器$（「刪除」，sessionList）是給肝功能的上下文，因此不起泡事件一路到頂部。