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

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

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

Answer 2

我的猜测是，您正在动态地加载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>

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

2 个答案: