Jquery模糊运行两次 - 为什么？

Question

我正在努力创建自己的成绩单,作为AJAX.在它的基础上有一个可编辑单元格的表格.用户点击单元格以输入成绩,当他们点击单元格时,成绩将通过AJAX发送到DB.到目前为止它工作得很好,除了我添加了用户点击Enter的能力,并让它表现得好像用户点击其他地方关闭编辑表单.

问题是,当用户点击返回而不是输入时,模糊部分会运行两次,如警报弹出两次所示.如果他们只是点击某处,那很好.我对jQuery的.blur()的理解是,如果你在没有回调或参数的情况下调用它,它就会充当一个行动者并将其视为所选元素失去焦点.

发生在IE8,Chrome和FF 4.0.1上.在我的测试站点上运行的实时版本

当我尝试设置用户点击输入时的模糊时,有人可以解释为什么它会运行两次吗？

更新:无法发布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动态构建表.

Answer 1

我认为你需要从改变$('#gradeUpdate').blur()到$('#gradeUpdate')[0].blur().浏览器将使jQuery模糊与正常模糊不同.所以它会被触发两次.