Question

Hi i recently asked a question regarding targeting dynamically produced links and someone kindly provided me a working answer however, having looked into it in more detail, the functionality i need is slightly different.

The following code toggles the highlighted class for a paragraph that corresponds to a link that’s being produced by a separate function. this is based on 3 mouse events:

$("#hi-4").live("mouseover mouseleave click", function(){
    $("p#p-4").toggleClass("highlighted");
});

This works great, however i would like the highlighted class to stay if the relevant link is clicked(until another link is clicked) Currently it toggles for each event listed and doesn’t stay highlighted if clicked. I have tried creating separate functions for each event and have tried using .addClass, .removeClass ` in different combinations for each event but i cant get it to stay highlighted only when clicked. many thanks

EDIT:

Heres a jsfiddle link http://jsfiddle.net/RVYnb/6/ to an example,thanks

Answer 1

You mean you want the highlighting to stay on till the user clicks something else?

Behavior like this? : http://jsfiddle.net/QLEHY/1/

<a href='#'>Para 1</a>
<a href='#'>Para 2</a>
<a href='#'>Para 3</a>

<p>Some text. Some text. Some text. Some text. Some text. </p>
<p>Some text. Some text. Some text. Some text. Some text. </p>
<p>Some text. Some text. Some text. Some text. Some text. </p>


$('a').click(function(){
   $('p.active').removeClass('active');
   $('p') .eq($(this).index()).addClass('active');
});

In the context of your code, simply removing the class before applying it should be fine.

$("#hi-4").live("mouseover mouseleave click", function(){
    $('p.highlighted').remove(); //remove all the highlighted classes. 
    $("p#p-4").toggleClass("highlighted");
});