Jquery blur running twice--why?

Question

I'm working on creating my own gradebook that works as AJAX. At its base a table with editable cells. User clicks on a cell to enter the grade, and when they click off the cell the grade is sent to the DB via AJAX. So far it's working fine, except that I've added in the ability for the user to hit Enter and have it act as if the user clicked somewhere else to close the edit form.

THE PROBLEM IS that when the user hits return instead of enter, the blur portion runs twice as evidenced by the alert popping up twice. If they just click somewhere, it's fine. My understanding of jQuery's .blur() is that if you call it without a callback or arguments it acts as a doer and treats it as if the selected element lost focus.

Happens on IE8, Chrome, and FF 4.0.1. Live version running at my test site

Can someone please explain why it's running twice when I try to set the blur when user hits enter?

UPDATE: Can't post the HTML, because it's really just a table and the table tag set isn't on the stackOverflow white list. (I'm new here, so maybe there's a way to do it, but I don't know it.)

Also, I solved the immediate issue by changing

                if(event.keyCode=='13')
            {
                $('#gradeUpdate').blur();
            }

to

                if(event.keyCode=='13')
            {
                $("#gradeUpdate").parent().focus();
                //$('#gradeUpdate').blur();
            }

but I'd still like to know why the original line isn't just making #gradeUpdate to blur like I thought it would.

Everything happens inside this function:

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
});

}

and here's the full HTML of the original page; it's really just a table with some pre-entered values to use for testing. My next step is to build the table on the fly with XML returned from an AJAX request.

Answer 1

I think you need to change from $('#gradeUpdate').blur() to $('#gradeUpdate')[0].blur(). The browser will take the jQuery blur different from the normal blur. So it will be triggered twice.