【发布时间】：2011-08-25 14:52:00
【问题描述】：
我正在创建自己的 AJAX 成绩册。在其底部有一个带有可编辑单元格的表格。用户单击单元格输入成绩，当他们单击单元格时，成绩通过 AJAX 发送到数据库。到目前为止，它工作正常，除了我已经添加了用户按 Enter 并让它表现得好像用户单击其他地方以关闭编辑表单的功能。
问题是当用户点击回车而不是回车时，模糊部分会运行两次，这可以通过两次弹出的警报来证明。如果他们只是点击某个地方，那很好。 我对 jQuery 的 .blur() 的理解是，如果您在没有回调或参数的情况下调用它，它将充当执行者并将其视为所选元素失去焦点。
在 IE8、Chrome 和 FF 4.0.1 上发生。直播版在my test site 运行
有人可以解释为什么当我尝试在用户点击输入时设置模糊时它会运行两次吗？
更新：不能发布 HTML，因为它实际上只是一个表格，并且表格标签集不在 stackOverflow 白名单上。 （我是新来的，所以也许有办法做到这一点，但我不知道。）
另外，我通过改变解决了眼前的问题
if(event.keyCode=='13')
{
$('#gradeUpdate').blur();
}
到
if(event.keyCode=='13')
{
$("#gradeUpdate").parent().focus();
//$('#gradeUpdate').blur();
}
但我仍然想知道为什么原来的行不只是让#gradeUpdate 像我想象的那样模糊。
一切都发生在这个函数内部：
function clickableCell(){
$("td.assignmentCell").click(function(){ //if a td with an assignment class is clicked,
if( clicked == 0)
{
clicked = 1;
currentValue = $(this).text();//get the current value of the entered grade
var passable = this;
alert("Test: passable is: "+$(passable).text());
//change content to be an editable input form element
$(this).html("<input name='gradeUpdate' id='gradeUpdate' size=3 value='"+currentValue+"' type='text' />");
//move the cursor to the new input and highlight the value for easy deletion
$('#gradeUpdate').focus().select();
//watch for keystrokes somewhere else and act appropriately
$(document).keyup(function(event){
//if they hit Enter, treat it like they clicked somewhere else
if(event.keyCode=='13')
{
$('#gradeUpdate').blur();
}
});
$('#gradeUpdate').blur(function(passable){
//reset the clicked counter
clicked = 0;
//check to see if the value is blank or hasn't changed
var inputValue = $('#gradeUpdate').val();
//////////////////////////////////////////////////////////////////////////////////////////
// Here we need to insert a REGEX check for the "exception" values created by the GDST
// and check for those values; anything else that's not a number will be disallowed
// and reset to "" so that it's caught in a later step. For now I'm just checking for digits
//////////////////////////////////////////////////////////////////////////////////////////
if(!inputValue.match(/^\d+$/))
{
alert ("we don't have a match!");
inputValue = "";
}
///////////////////////////////////////////////////////////////////////////////////////////
if(currentValue == inputValue || inputValue =="")//hasn't changed or is blank
{
//DON'T run AJAX call
alert("Not a good value, reverting to old value!");
//assign the original, unchanged value to the table
$('#gradeUpdate').parent().text(currentValue)
$("#gradeUpdate").remove();//close out the input block
//make it like they actually clicked on the element they did click on to lose focus
$(this).click();
}
else //it's valid, send the ajax
{
//send AJAX call here
//on success update the td
alert("We're all good--entering value!");
$("#gradeUpdate").parent().text(inputValue);
$("#gradeUpdate").remove();
}
});
}//close of if clicked ==0
});
}
这是原始页面的完整 HTML；它实际上只是一个表，其中包含一些用于测试的预先输入的值。我的下一步是使用从 AJAX 请求返回的 XML 动态构建表。
【问题讨论】：