在MVC视图表中显示json结果

Question

我正在使用MVC5并在EF DbContext中获取颜色数据，并在表标记中通过Javascript和Json显示数据。但链接＆＃39;详细信息＆＃39;在表中没有运行Javascript函数。请帮帮我。

颜色模型：

    public partial class ViewColors
    {
        public int Id { get; set; }
        string Name { get; set; }
        public string Comment { get; set; }
        public int GroupId { get; set; }
        public string GroupName { get; set; }
    }

控制器：

    public class HomeController : Controller
    {
        EFModel db = new EFModel();

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetColors()
        {
            var model = db.ViewColors.ToList();
            return Json(model, JsonRequestBehavior.AllowGet);
        }

        public ActionResult ColorDetails(int ColorId)
        {
            var model = db.ViewColors.Find(ColorId);
            return Json(model, JsonRequestBehavior.AllowGet);
        }
    }

查看页面：

@{
    ViewBag.Title = "Home Page";
}

<div class="row">
    <table id="ColorList" class="table table-striped">
        <thead>
            <tr>
                <th>R</th>
                <th>Name</th>
                <th>Group</th>
                <th>Comment</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>

@section scripts
{
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">

        function displayData(response) {
            var strrow = "" ;

            if (response != null) {
                for (var i = 0; i < response.length; i++) {
                    strrow = "<tr>";
                    strrow += "<td>" + (i+1) + "</td>";
                    strrow += "<td>" + response[i].Name + "</td>";
                    strrow += "<td>" + response[i].GroupName + "</td>";
                    strrow += "<td>" + response[i].Comment + "</td>";
                    strrow += "<td><a href='javascript:void(0)' class='ColorDetail' data-id='" + response[i].Id + "'>Details</a></td>";
                    strrow += "</tr>";
                    $("#ColorList").append(strrow);
                }
            }
        }

        $(function () {
            var actionUrl = '@Url.Action("GetColors", "Home")';
            $.getJSON(actionUrl, displayData);

            $(".ColorDetail").click(function () {
                alert("");
                debugger;
                var TeamDetailPostBackURL = '/Home/ColorDetails';
                var $buttonClicked = $(this);
                var ColorId = $buttonClicked.attr('data-id');
                var options = { "backdrop": "static", keyboard: true };
                $.ajax({
                    type: "GET",
                    url: TeamDetailPostBackURL,
                    contentType: "application/json; charset=utf-8",
                    data: { "ColorId": ColorId },
                    datatype: "json",
                    success: function (data) {
                        debugger;
                        alert(data.Name + " " + data.GroupName);
                    },
                    error: function () {
                        alert("Dynamic content load failed.");
                    }
                });
            });
        });
    </script>
}