jcanker Posted May 13, 2011 Share Posted May 13, 2011 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(); }); Quote Link to comment https://forums.phpfreaks.com/topic/236284-function-inside-function-firing-unexpectedly/ Share on other sites More sharing options...
JasonLewis Posted May 13, 2011 Share Posted May 13, 2011 event.stopPropagation seems to be what you're after. In the clickableCell click event add this: $("td.assignmentCell").click(function(event){ event.stopPropagation(); Quote Link to comment https://forums.phpfreaks.com/topic/236284-function-inside-function-firing-unexpectedly/#findComment-1214823 Share on other sites More sharing options...
jcanker Posted May 13, 2011 Author Share Posted May 13, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/236284-function-inside-function-firing-unexpectedly/#findComment-1214909 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.