JQUERY KeyPress 事件触发多次，每次呈指数增长

Question

应用：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")
        )
    )

以下是 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>

当代码运行时，当我第一次在列中输入值并按 Enter 键时，代码会触发四次。但是下一次，它会触发 8 次，依此类推…… 这让我发疯！ 非常感谢任何解决此问题的建议。

Answer 1

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

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

<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>

Answer 2

尝试 Jquery 一种方法： http://api.jquery.com/keydown/

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