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/']
Use delegation instead

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

```

Delegation would handle the dynamic changes on the nodes v/s `.click()`, which would not rebind dynamically modified nodes. [Read more on delegation using `on` here](http://api.jquery.com/on/)
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/>