The problem is that you're binding the click event to the projectLink class
on document ready but since no one has clicked the image yet the class isn't
present so there are no elements that match the class selector and thus no
events bound.
You could do something like the code below. This will allow the image's
parent link to active upon image click if the linkActive class is present.
$(".switchProject").click(function(e) {
if ( !$(this).parent().is('.linkActive') ) {
var img = $(this).attr("id");
$("#"+img).attr("src", "images/"+img+"_down.png");
$("#"+img+"_up2").attr("src", "images/"+img+"_down2.png");
$(this).parent().addClass('linkActive');
// Cancel our event so it doesn't trigger the link.
e.stopPropagation();
e.preventDefault();
return false;
}
});
Cheers,
-Jonathan
On 1/7/08, browntown <[EMAIL PROTECTED]> wrote:
>
>
> So I'm working with a client that wants to be able to click an image
> to see the rollover state...they then want to click the image again to
> be taken to a url.
>
> I'm about to suggest that we change the first click to be a
> traditional rollover as it would simplify things and make things less
> confusing but I would still like to know how I can achieve the
> following.
>
> I want to be able to to add a class to the parent link and then when I
> click the link with the new class I want to be taken to the url. I'm
> having trouble getting this to work. I can see that the class is being
> added as the presentation changes. How can I get jquery to recognize
> this new class?
>
> my html looking something like:
> <code><a href="#" id="btn_projects_1_link" class="piggybank"><img
> src="images/btn_projects_1_up.png" id="btn_projects_1"
> class="switchProject" alt="I smell bankin'" border="0" /></a>
>
> </code>
>
> my jquery...
> <code>
> $(document).ready(function(){
> $(".projectLink").click(
> function()
> {
> alert('w00t');
> }
> );
> $(".switchProject").click(
> function()
> {
> var img = $(this).attr("id");
> $("#"+img).attr("src",
> "images/"+img+"_down.png");
> $("#"+img+"_up2").attr("src",
> "images/"+img+"_down2.png");
>
>
> $(this).parent().addClass("projectLink");
> }
> );
> });
> </code>
>
