jquerykeypress事件触发多次，每次按指数递增

应用：MVC

在我的部分视图代码中，我有一个webgrid，它具有可更新的文本框列。我正在为这些文本框绑定KeyPress事件代码，以响应Enter键并进行AJAX调用以更新数据库。 我的WebGrid设置如下：

  var grid = new WebGrid(source: Model, selectionFieldName: "SelectedRow",
            rowsPerPage: (500),
            columnNames: new[] { "EmpID", "Name", "PayGroup", "NetPay", "Comments", "Dept#", "MailSort" },
            canPage: true,
            canSort: true,
            ajaxUpdateContainerId: "gridContent"
            );
   <div id="gridContent">
    @grid.GetHtml(
    tableStyle: "webgrid-table",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-row-style",
    htmlAttributes: new { id = "EmployeeGrid" },
    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",
    columns: grid.Columns(

            grid.Column("ID", header: "ID", format: @<text>@item.EmpID</text>, style: "colID"),
            grid.Column("Name", header: "Name", format: @<text>@item.Name</text>, style: "colName"),
            grid.Column("Dept", header: "Dept", format: @<text>@item.Dept</text>, style: "colDept"),
                            //grid.Column("Location", header: "Location", format: @<text>@item.Location</text>, style: "colLocation"),
            grid.Column("NetPay", header: "NetPay", format:  @<input id="valNetPay" type="text" style="width:50px" value="@item.NetPay" />, style: "colNetPay"),
            grid.Column("MailSort", header: "MailSort", format:  @<input id="valMailSort" type="text" style="width:50px" value="@item.MailSort" />, style: "colMailSort"),
            grid.Column("PayGroup", header: "PayGroup", format:  @<input id="valPayGroup" type="text" style="width:50px" value="@item.PayGroup" />, style: "colPayGroup")
        )
    )

var grid=new WebGrid（来源：Model，selectionFieldName:“SelectedRow”，
rowsPerPage：（500），
专栏名称：新[]{“EmpID”、“Name”、“PayGroup”、“NetPay”、“Comments”、“Dept#”、“MailSort”}，
坎佩奇：没错，
坎索特：没错，
ajaxUpdateContainerId:“gridContent”
);
@grid.GetHtml(
表样式：“webgrid表”，
标题样式：“webgrid标题”，
页脚样式：“webgrid页脚”，
交替行样式：“webgrid交替行”，
selectedRowStyle：“webgrid行样式”，
htmlAttributes:new{id=“EmployeeGrid”}，
模式：WebGridPagerModes.All，
第一个文本：“，
lastText:“Last>>”，
列：grid.columns(
grid.Column（“ID”，标题：“ID”，格式：@@item.EmpID，样式：“colID”），
grid.Column（“名称”，标题：“名称”，格式：@@item.Name，样式：“colName”），
网格栏（“部门”，标题：“部门”，格式：@@item.Dept，样式：“colDept”），
//grid.Column（“位置”，标题：“位置”，格式：@@item.Location，样式：“搭配”），
grid.Column（“NetPay”，标题：“NetPay”，格式：@，样式：“colNetPay”），
grid.Column（“MailSort”，标题：“MailSort”，格式：@，样式：“colMailSort”），
grid.Column（“PayGroup”，标题：“PayGroup”，格式：@，样式：“colPayGroup”）
)
)

以下是jquery事件处理程序。我在下面发布了一列的代码，但是其他两个文本列的代码是相似的，并且问题仍然存在

    <script>
    $(document).ready(function () {

        $(document).on("keypress", ".colMailSort", function (e) {
            var eCode = e.keycode || e.which

            //Capture Enter key
            if (eCode == 13) {
                e.preventDefault();
                alert(eCode);
                alert('MailSort');

                iid = $(this).closest('tr').find('td.colID').text();
                var np = $(this).closest('tr').find('td #valNetPay').val();
                var pg = $(this).closest('tr').find('td #valPayGroup').val();
                var ms = $(this).closest('tr').find('td #valMailSort').val();


                $.ajax({
                    url: '@Url.Action("SavePayGroup", "Payroll")',
                    type: 'POST',
                    cache: false,
                    data: { id: iid, paygroup: pg, netpay: np, mailsort: ms },

                }).done(function (result) {
                    alert('Saved');
                    $('#PayrollMenuResults').html(result);
                    console.log("saved");
                    return false;
                });

            }
        });
    });
</script>

$（文档）.ready（函数（）{
$（document）.on（“keypress”和“.colMailSort”，函数（e）{
var eCode=e.keycode | | e.which
//捕获输入键
如果（eCode==13）{
e、 预防默认值（）；
警报（eCode）；
警报（“邮件排序”）；
iid=$（this.closest（'tr'）.find（'td.colID'）.text（）；
var np=$（this）.closest（'tr'）.find（'td#valNetPay'）.val（）；
var pg=$（this）.closest（'tr'）.find（'td#valPayGroup'）.val（）；
var ms=$（this）.closest（'tr'）.find（'td#valMailSort'）.val（）；
$.ajax({
url:'@url.Action（“SavePayGroup”、“Payroll”），
键入：“POST”，
cache:false，
数据：{id:iid，paygroup:pg，netpay:np，mailsort:ms}，
}).完成（功能（结果）{
警报（“已保存”）；
$（'#PayrollMenuResults'）.html（结果）；
控制台日志（“已保存”）；
返回false；
});
}
});
});

当代码运行时，当我第一次在列中输入值并按enter键时，代码会触发四次。但下一次，它发射了8次，以此类推。。。 这简直快把我逼疯了！ 非常感谢您提出任何解决此问题的建议。

请尝试Jquery的一种方法：

---

我猜您是在动态加载javascript，很可能是从ajax请求加载的，每次发出ajax请求时，您都会一次又一次地绑定keypress事件。尝试将javascript代码放在单独的JS文件中，并在头文件中加载一次。

为了验证这一点，我有一个补丁，您可以用当前的Javascript替换它。

如果（！window['script_added']）{
窗口['script_added']=true；
$（文档）.ready（函数（）{
$（document）.on（“keypress”和“.colMailSort”，函数（e）{
var eCode=e.keycode | | e.which
//捕获输入键
如果（eCode==13）{
e、 预防默认值（）；
警报（eCode）；
警报（“邮件排序”）；
iid=$（this.closest（'tr'）.find（'td.colID'）.text（）；
var np=$（this）.closest（'tr'）.find（'td#valNetPay'）.val（）；
var pg=$（this）.closest（'tr'）.find（'td#valPayGroup'）.val（）；
var ms=$（this）.closest（'tr'）.find（'td#valMailSort'）.val（）；
$.ajax({
url:'@url.Action（“SavePayGroup”、“Payroll”），
键入：“POST”，
cache:false，
数据：{id:iid，paygroup:pg，netpay:np，mailsort:ms}，
}).完成（功能（结果）{
警报（“已保存”）；
$（'#PayrollMenuResults'）.html（结果）；
控制台日志（“已保存”）；
返回false；
});
}
});
});
}

Hi-我试过了-但只触发了一次-即第一次按键-当用户输入ENTER键时，事件根本不会触发！我懂了。我再看看。谢谢你，安科。我试过了。它仍然在重复：（我还遇到了一个系统内存不足异常！我通过对我的应用程序进行一些修改来实现这一点。遵循Ankur的解决方案并捆绑脚本。谢谢！

    $(document).one('keypress', function(e) {
        // code goes here
 });

<script>
    if(!window['script_added']) {
        window['script_added'] = true;
        $(document).ready(function () {

            $(document).on("keypress", ".colMailSort", function (e) {
                var eCode = e.keycode || e.which

                //Capture Enter key
                if (eCode == 13) {
                    e.preventDefault();
                    alert(eCode);
                    alert('MailSort');

                    iid = $(this).closest('tr').find('td.colID').text();
                    var np = $(this).closest('tr').find('td #valNetPay').val();
                    var pg = $(this).closest('tr').find('td #valPayGroup').val();
                    var ms = $(this).closest('tr').find('td #valMailSort').val();


                    $.ajax({
                        url: '@Url.Action("SavePayGroup", "Payroll")',
                        type: 'POST',
                        cache: false,
                        data: { id: iid, paygroup: pg, netpay: np, mailsort: ms },

                    }).done(function (result) {
                        alert('Saved');
                        $('#PayrollMenuResults').html(result);
                        console.log("saved");
                        return false;
                    });

                }
            });
        });
    }
</script>