function inside function firing unexpectedly

[jcanker]

 

I have the code below which basically highlights a column and row in a table as the mouse moves over the table.  I want to make a td become editable when it's clicked and save the new value when the user clicks anywhere outside the td (actually, the input that's created when the user clicks).

 

The problem is that although the $(document).click sits inside the $("td.assignmentCell").click(function(){}) function, it's firing when the td is first clicked.  Additionally, it fires again for each time another td is clicked.  In other words, the first time the td is clicked, the $(document).click(function(){}) function fires the test alert line; the 2nd time a TD is clicked, the alert is fired twice back-to-back, the 3rd time the td is clicked, the alert fires 3 times back-to-back-to-back.

 

TBH, I remembered that I've written code going down a completely different alley that achieves the intended effect, so I can just use that, but I can't for the life of me figure out with this code: 1) Why the document.click is firing when the td is clicked for the first time, and why it adds an additional alert on each click.

 

If you want to see this debacle in action it's temporarily at:  http://www.ankertechnicalservices.com/portal/test/tabletest/

 

 

function highlightTable(){
//when a td is moused over, get the 2nd class of the td (2nd class is the assignment name, added when the element was put in the DOM)
$("td.assignmentCell").mouseenter(function(){ 
	var assignment = "."+$(this).attr('class').split(' ')[1];
//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 assignment = "."+$(this).attr('class').split(' ')[1];
	$(assignment).removeClass("highlight");
	$(this).parent().children().removeClass("highlight");

});
}//end of function highlightTable()


function clickableCell(){
$("td.assignmentCell").click(function(){ 
//get the current grade value
var value = $(this).text();
//	alert("The current grade is "+value);
	$(this).html('<input name="gradeUpdate" type="text" size =3 value="'+value+'" />');
	//check for clicks anywhere else or ENTER being pressed
	$(document).click(function(){
		if($(this).is("input"))
		{
			alert("I think you clicked on the input block");
		}
		else
		{
			alert("We clicked somewhere that wasn't in the input block!");
		}
	//get the current value of the input block
		var newValue = $("table > input").val();
	});
});
}//end of function clickable Cell


$(document).ready(function(){
					   
highlightTable();//hightlight rows
clickableCell();

});

[JasonLewis]

event.stopPropagation seems to be what you're after. In the clickableCell click event add this:

 

$("td.assignmentCell").click(function(event){ 
   event.stopPropagation();

[jcanker]

That fixed the problem with the event firing when the cell was first clicked for editing, but it still has the issue of the additional firings; although this time it's adding 2 for each click outside the editable td.