Question

I have been onto this for days and i seem not to be able to break even. I have a table that deplays a series of links in one of its cell – the last cell that is.
Now when clicked ,the text value in the last link changes(implemented with jsf ajax), to reflect the status of the row it resides in ,from ‘suspend’ to ‘resume’ and vice versa. i have used jQuery to change the background
color of a row whenever the document is loaded and the text link reads ‘resume’. See below on how i have implemented this

var defaultval;

$(" table tbody tr td:nth-child(7)").each(function() {
    defaultval = $(this).find("a:nth-child(4)").html();
    if (defaultval == "resume") {
        $(this).parents("tr").addClass("suspended")
    }

});​

Now i want this row background color to change whenever the link is clicked and its text value changes to ‘resume’ ,so i wrote JQuery code below

$("table tbody tr td:nth-child(7) ").click(function() {
    if ($(this).find("a:nth-child(4)").html() !== "resume") {
        $(this).parents("tr").addClass("suspended");
    }
    else {
        $(this).parents("tr").removeClass("suspended");
    }
});​ 

It seemed to work when i click on the link. But the problem is that when the cell itself and other links within the cell
are clicked it changes without the the text of the link changing because of the implementation above.
And when i do this:

$("table tbody tr td:nth-child(7) a:nth-child(4)").click(function() {
    if ($(this).html() !== "resume") {
        $(this).parents("tr").addClass("suspended");
    }else {
        $(this).parents("tr").removeClass("suspended");
    }
});​

It changes once and does not change back with further clicks.
Now i want to restrict this effect to only when this link is clicked.Thanks in anticipation of your Response(s).

Answer 1

By the sounds of it your code that changes the text in the link is actually fully replacing the link (a tag and all)… which means you remove the click event listener you’ve added. You have two options:

Option one

Don’t replace the link entirely, just change the text and it’s href (if needed). If you don’t remove / replace the original a tag, the click listener will remain in place and will trap more clicks after the first one. The following will allow you to just change the parts of the a that you need.

$('table tbody tr td:nth-child(7) a:nth-child(4)')
    .attr('href', 'http://stackoverflow.com')
    .html('My new link text goes here');

Option two

Change your event listener to use .live or .on (depending on which version of jQuery you are using).

$("table tbody tr td:nth-child(7) a:nth-child(4)").live('click', function() {
  if ($(this).html() !== "resume") {
    $(this).parents("tr").addClass("suspended");
  }else {
    $(this).parents("tr").removeClass("suspended");
  }
});​

What the above does is not actually bind the listener to the element, it binds it to the document instead, and when a click event is triggered on the document it bubbles the event up until the jQuery selector matches an element that received a click. This means you can modify the a link as much as you want… you could even add more a tags… and they would still all work as long as they matched the jQuery selector you used.

further notes

As an additional recommendation there are two things that I would alter about what you are doing.

First, rather than using :nth-child() to target your elements, I would add classes to them and target them that way. This is much more future-proof if your table ever changes cell or row dimensions.

Secondly, when refering to $(this) in your JavaScript it is far better to do the following:

$("table tbody tr td.target-cell a.target-link").live('click', function() {
  var self = $(this);
  if (self.html() !== "resume") {
    self.parents("tr").addClass("suspended");
  }else {
    self.parents("tr").removeClass("suspended");
  }
});​

By creating a variable to store $(this) you optmise your code quite a lot, rather than having jQuery calculate $(this) every time.