錯誤：語法錯誤，無法識別的表達當返回HTML

Question

我想刪除行使用jQuery阿賈克斯，在我看來，我呼籲Ajax控制器js函數/動作

<a href="javascript:void(0);" onClick="markup2('@Url.Action("ChannelDelete", "MyInfo", new {area = ""})');" class="btn btn-lg btn-danger" style="margin-bottom: 15px;">Delete</a> 

function markup2(e) { 
    $(function() { 
    $("#LoadPages").empty(); 
    $("#LoadPages").html('<div style="padding: 20px 15px"><div class="row"><div class="center-block col-md-1" style="float: none;"><img src="/Upload/pageLoader.gif" alt="loading..." /></div></div></div>'); 

    $.ajax({ 
     type: "POST", 
     url: e 
    }).done(function(data) { 
     $("#LoadPages").load(data); 
    }); 
    return false; 
    }); 
} 

上述功能它也沒關係，獲取網址併發送AJAX POST並獲取數據; 當返回數據（HTML），並插入$("#LoadPages")元素（("#LoadPages").load(data)）

讓我一個錯誤：

Error: Syntax error, unrecognized expression:

<h2>my channels</h2> 
    <table class="table"> 
     <tr> 
      <th> 
       channel name 
      </th> 
      <th> 
       name 
      </th> 
      <th> 
       UserSelectedChannelJoinDate 
      </th> 
      <th></th> 
     </tr> 
    </table> 

我不知道爲什麼得到錯誤

Answer 1

首先，你應該使用不引人注意的事件處理程序，而不是過時的on*事件屬性。

其次，你的問題是由於使用load()。該方法旨在接收一個URL以發出一個返回HTML的AJAX請求，然後將其設置爲指定元素的內容。但是，你的代碼是給出一個HTML字符串，而不是一個URL，因此錯誤。

爲了解決這個問題，使用html()代替load()：

<a href="#" data-action="@Url.Action("ChannelDelete", "MyInfo", new {area = "" })" class="btn btn-lg btn-danger">Delete</a> 

$(function() { 
    $('.btn').click(function(e) { 
    e.preventDefault(); 

    $("#LoadPages").html('<div style="padding: 20px 15px"><div class="row"><div class="center-block col-md-1" style="float: none;"><img src="/Upload/pageLoader.gif" alt="loading..." /></div></div></div>'); 

    $.ajax({ 
     type: "POST", 
     url: $(this).data('action') 
    }).done(function(data) { 
     $("#LoadPages").html(data); 
    }); 
    }); 
}); 

我也強烈建議您使用外部的樣式表，而不是在你的HTML的style屬性。