Question

I want to add a marker character to a link when the user clicks it, and remove it when he clicks it a second time.

Here’s what I have :

$('#text a').click(function () {
    $(this).addClass('clicked');
    $(this).text(markerTextChar +  $(this).text());
    $(this).click(function () {
        $(this).removeClass('clicked');
        $(this).text($(this).text().substring(1));
    });
});

The marker is added on click, but it is added one more time when I click it to deselect it.

Can you help me fix that ?

Answer 1

Adding a event handler with bind (or click) doesn’t remove the old ones.

You could unbind it but this is not needed. Do this instead :

$('#text a').click(function () {
   if ($(this).hasClass('clicked')) {
        $(this).removeClass('clicked');
        $(this).text($(this).text().substring(1));
   } else {
      $(this).text(markerTextChar +  $(this).text());
       $(this).addClass('clicked');
   } 
});

demonstration

---

You might also use toggleClass and use :before in css to add your char, that would be much cleaner.

css :

.clicked:before {
    content: "yourmarker";
}​

javascript :

$('#text a').click(function () {
   $(this).toggleClass('clicked');
});​

demonstration