父视图切换部分视图 - 多次单击触发器

Question

我有父视图和2个部分视图。我在父页面上为点击事件注册的每个局部视图上都有按钮。他们进行ajax调用以获得各自的局部视图。

控制器

        [HttpPost]
        public ActionResult GetEmployee(int id)
        {
            HumanResourcesManager man = new HumanResourcesManager();
            var emp = man.GetEmployee(id);
            EmployeeModel empModel = new EmployeeModel(emp);
            return PartialView("_EmployeeDetails", empModel);
        }

        [HttpPost]
        public ActionResult GetEmployeeForEdit(int id)
        {
            HumanResourcesManager man = new HumanResourcesManager();
            var emp = man.GetEmployee(id);
            ViewBag.States = man.GetStates();
            EmployeeModel empModel = new EmployeeModel(emp);
            return PartialView("_EmployeeEdit", empModel);
        }

家长视图

  @model HumanResources.Web.Models.EmployeeModel
  <p>
     Selected Employee: @Html.TextBox("EmployeeSearch")
   </p>
<script type="text/javascript">

    $("#EmployeeSearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "@(Url.Action("FindEmployee", "Employee"))",
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                            response($.map(data, function (item) {
                            return { label: item.DisplayName, value: item.DisplayName, id: item.Id };
                        }))
                    }
                })
            },
            select: function (event, ui) {
                if (ui.item) {
                    GetEmployeeDetails(ui.item.id);
                }
            }
        });



    function GetEmployeeDetails(id) {

        $("partialView").empty();
        $.ajax({
            type: "POST",
            url: "@(Url.Action("GetEmployee", "Employee"))",
            data: { id: id },
            success:function(result)
            {
                $("#partialView").html(result);
            },
            failure: function (response) {
                alert(response.d);
            }
        });

        @*$(document).on('click', "#empEdit", function(){
            $.ajax({
                type: "POST",
                url: "@(Url.Action("GetEmployeeForEdit", "Employee"))",
                data: @Html.Raw(Json.Encode(Model)),
                success:function(result)
                {
                    $("#partialView").html(result);
                },
                failure: function (response) {
                    alert(response.d);
                }
            })
        });*@

        $(document).on('click', "#empEdit", function(){
            $.ajax({
                type: "POST",
                url: "@(Url.Action("GetEmployeeForEdit", "Employee"))",
                data: {id: $("#editEmployeeId").val()},
            success:function(result)
            {
                $("#partialView").html(result);
            },
            failure: function (response) {
                alert(response.d);
            }
        })
    });

        $(document).on('click', "#empEditCancel", function(){
            GetEmployeeDetails($("#editEmployeeId").val());
        });

}
</script>

<div id="partialView">
</div>

部分视图 - 详细信息 详细信息旨在显示详细信息和编辑按钮。我在父视图中使用的JavaScript。

@model HumanResources.Web.Models.EmployeeModel
@{ 
    Layout = null;
}


    @Html.HiddenFor(model => model.Employee.Id, new { id = "editEmployeeId" })

    @Html.DisplayTextFor(model => model.Employee.FirstName)

    <input id="empEdit" type="button" value="Edit"/>

部分视图 - 修改 “编辑视图”显示与详细信息部分视图相同的值，但显示为可编辑字段。

    @model HumanResources.Web.Models.EmployeeModel 
 @{
     Layout = null; 
}

@using (Html.BeginForm("Save", "Employee")) {

@Html.HiddenFor(model => model.Employee.Id, new { Id = "editEmployeeId" })

<div class="container">

    <input type="submit" value="Save" />

    <input id="empEditCancel" type="button" value="Cancel"/>
</div> 
}

我的问题

编辑和取消（在两个部分视图之间切换）一次正常。多次编辑和取消似乎点击的功能被称为越来越多的次数2.导致警报被多次调用。

我做错了什么？