I have two click functions: one targets td.default and the second td.clicked. Both changes the class attribute to either 'clicked' or 'default' (and updates the text in the cell). The classes are getting changed from the first click function but the second click function that looks for td.click doesn't find it's target.

```
$("td.default").click(function() {
    $(this).attr('class','clicked');
    $(this).text("monkey");
    $("#ouput").append("td.default clicked<br/>"); //reporting message
});
$("td.clicked").click(function() {
    $(this).attr('class','default');
    $(this).text("empty");
    $("#ouput").append("td.clicked clicked<br/>"); //reporting message
});

```
['https://Stackoverflow.com/questions/19576214', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2237565/']
When you bind a click handler, you are binding to the element. Changing the class of the element doesn't change that handler that you've bound to it. If you want that behavior, you'll need to use `on()` with event delegation. See [`on()`](http://api.jquery.com/on/), especially the section about "direct and delegated events".

[**Demo Click Here**](http://jsfiddle.net/hEQMe/) : 

```
$(document).on('click', "td.default", function() {
    $(this).attr('class','clicked');
    $(this).text("monkey");
    $("#ouput").append("td.default clicked<br/>"); //reporting message
});
$(document).on('click', "td.clicked", function() {
    $(this).attr('class','default');
    $(this).text("empty");
    $("#ouput").append("td.clicked clicked<br/>"); //reporting message
});

```
That seems like a lot of work, would it be easier to do it this way?

```
$('td.default,td.clicked').on('click', function() {
    $(this).toggleClass('default').toggleClass('clicked').text(
        $(this).text() === 'empty' ? 'monkey' : 'empty'
    );
});

```

made a fiddle: <http://jsfiddle.net/filever10/PdjMX/>