JQUERY KeyPress 事件触发多次,每次呈指数增长
JQUERY KeyPress event fires multiple times exponentially increasing each time
应用程序: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 次,依此类推......
这让我抓狂!
非常感谢任何解决此问题的建议。
尝试Jquery一种方法:
http://api.jquery.com/keydown/
$(document).one('keypress', function(e) {
// code goes here
});
我的猜测是您正在动态加载 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>
应用程序: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 次,依此类推...... 这让我抓狂! 非常感谢任何解决此问题的建议。
尝试Jquery一种方法: http://api.jquery.com/keydown/
$(document).one('keypress', function(e) {
// code goes here
});
我的猜测是您正在动态加载 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>