Question

Our users have a table showing their titles. (They’re contained in a datatable, if that matters). The idea is to simply have an image that they can click to toggle published or not. The below code does change the image as expected, but does not change the class.

I’ve also tried addclass/removeclass, but with the same results. Am I missing something obvious, or am I doing something completely wrong?

<img class="title_publish" src="IsNotPublished.png">'
<img class="title_unpublish" src="IsPublished.png">


$('.title_publish').live('click', function () {
    this.src="IsPublished.png";
    this.toggleClass("title_publish");
    this.toggleClass("title_unpublish");
} );

$('.title_unpublish').live('click', function () {
    this.src="IsNotPublished.png";
    this.toggleClass="title_publish";
    this.toggleClass="title_unpublish";
} );

Answer 1

Try this

$('.title_publish').live('click', function () {
    this.src="IsPublished.png";
    $(this).toggleClass("title_publish");
    $(this).toggleClass("title_unpublish");
} );