How do I Work with Overlapping layers and links in JQuery?

Working with Overlapping layers and links in JQuery

tr________________________________________________________________________________ | td | td | td | | checkbox | content | content ___________| |____________|____________________________________|_______________|_a____link_____|

I have a table filled with values and some of the content contains too much text, therefore i have used a jquery function to truncate the text content if it passes over a limit. The truncate function appends a link at the end of a text to untruncate/expand the text content.

e.g. "The Quick brown fox jumps over the" will s开发者_运维问答how "The Quick brown fox [more]" (the [more] is the link to expand it).

Now my problem is i have built the page to select/unselect the checkbox when you click anywhere on the row (tr tag) but I dont want the checkbox affected when I click the link i.e. because the link (a tag) overlaps the row (tr tag).

I have looked into filtering out the a tag with selectors, and using spans or divs to embed them beneath the link to prevent any interaction with the base row. I managed to block click over an area using divs and spans but it only blocks clicking if the css position is set to absolute in which case multiple divs or span will all overlap each other in one row rather than over each link.

This would have been simpler if i could do something like this:

$("tr").each(function(){ if($(this).find("a").is("clicked"){ //do nothing }else{ if($(this).find("tr").is("clicked"){ //toggle checkbox });

} });

I just need to perfom an if statement checking whether links or links in rows have been clicked and perform actions besed on that.

---

Just return false from the handler for the link. This will prevent the normal action of the link from being taken and prevent it from bubbling up.

 $('tr a.showMore').click( function() {
      ... expand the text or show a popup...
      return false; // don't allow it to bubble up
 });