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>

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

Answer 1

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

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

Answer 2

我的猜测是您正在动态加载 javascript，很可能是从 ajax 请求加载，并且每次您发出 ajax 请求时，您都会再次绑定按键事件然后再次。尝试将您的 javascript 代码放在一个单独的 JS 文件中，并在 header.

中加载一次为了验证这一点，我有一个补丁，你可以用你当前的 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>

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

JQUERY KeyPress event fires multiple times exponentially increasing each time

jquery

ajax

model-view-controller

keypress

webgrid