.blur running twice

[jcanker]

I'm working on an editable table.  The intent is when the click on another cell or hit the enter key, it processes the edited value and places it as the text value in the TD. 

 

When they click anywhere on the page the code works as expected, but when they hit the Enter key, it runs the blur twice (as evidenced by the alert window indicating that the value is fine and will be processed). 

 

The problem code happens inside function clickableCell().

 

My understanding of jQuery's .blur() with no arguments acts as if the selected element lost focus.  Why is this code triggering the blur twice?

If I leave out the code that looks for the Enter key being pressed, the Enter key has no effect and does not cause the cell to lose focus. 

 

Code below, page in action is at : http://www.ankertechnicalservices.com/portal/test/tabletest/

 

function highlightTable(){
//when a td is moused over, 
$("td.assignmentCell").mouseenter(function(){ 
	var assignmentSplit = this.className.split(' ');
	var assignment = "."+assignmentSplit[assignmentSplit.length-1];//get the last class of the td (the short assignment name, added when the element was put in the DOM)
//add the highlight to the column
	$(assignment).addClass("highlight");
//get the parent row, select all td in the row, add the highlight class
	$(this).parent().children().addClass("highlight");
})
.mouseleave(function(){
	var assignmentSplit = this.className.split(' ');
	var assignment = "."+assignmentSplit[assignmentSplit.length-1];
	$(assignment).removeClass("highlight");
	$(this).parent().children().removeClass("highlight");
});

}//end of function highlightTable()

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

}

/////////////////////////////////////////////////////////
//  GLOBALS GO HERE
/////////////////////////////////////////////////////////

var clicked = 0;
var originalValue = "";
$(document).ready(function(){
					   
highlightTable();//hightlight rows
clickableCell();

});