jQuery Click event issue

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

JohnP · Accepted Answer · 2011-05-28 11:16:42Z

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");
});

answered May 28, 2011 at 11:16

JohnP

50k13 gold badges112 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tcnarss Over a year ago

Thank you for the reply,That is the functionality i'm looking for(plus the mouseover/mouse leave effect), this code unfortunately doesn't work. The paragraph doesn't stay highlighted as per your example, also if you rolloverand roll out more than once the event isnt being fired properly. any other ideas? thanks

JohnP Over a year ago

@tcnarss It's a bit hard to say without your HTML. Can you post your simplified markup on fiddle and post the link here?

tcnarss Over a year ago

Apologies, here's the example link its as simplified as possible, as you can see (on the #p-2 paragraph) that the mouseover and mouseleave events are working fine but the click event doesnt seem to be adding the class correctly.. any help would be very much appreciated, its been bugging me all day

JohnP Over a year ago

@tcnarss Is this what you're looking for? : jsfiddle.net/RVYnb/37 The event binding on that code only worked on one element.

tcnarss Over a year ago

this works great,thank you for your help. i noticed that the plug in had a lot of return false; statements. so the click event was being killed.

kufi · Accepted Answer · 2011-05-28 11:26:10Z

1

You probably want something like this:

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

$("#hi-4").live("click", function() {
    $("p#p-4").addClass("clicked").addClass("highlighted");
});

$("a:not(#hi-4)").live("click", function() {
    $("p#p-4").removeClass("clicked").removeClass("highlighted");    
});

jsfiddle example

answered May 28, 2011 at 11:26

kufi

2,45819 silver badges14 bronze badges

4 Comments

tcnarss Over a year ago

This seems like the right solution and it works for the mouseover/leave events but the click event still doesn't work. the link with id '#hi-4' is being created by a separate function and i was under the impression that the .live method would solve this, everything seems to be working except for the click event. its hard to post an full example as the links are dynamically produced thumbnails from an image slider.

tcnarss Over a year ago

EDIT: your example works perfectly, although having viewed my code whilst clicking the link it appears the clicked class isn't being applied.

tcnarss Over a year ago

Also i'm using jQ 1.4.4 could this potentially be the issue

kufi Over a year ago

hm, jQ 1.4.4 shouldn't be the problem. I have updated the jsfiddle so the #hi-4 can be added dynamically.

Collectives™ on Stack Overflow

jQuery Click event issue

2 Answers 2

5 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Related