Link within clickable div

[vicvirk]

Hi,

I have this:

<style type="text/css" media="screen">
	.myDivClass {	
		width: 500px;
		height: 100px;
		border: 1px solid #000;
	}
	#divClick, #aClick { display:none; }
</style>

<script type="text/javascript" langugage="javascript">
	// assume jquery-1.4.4 is already loaded
	$(document).ready(function(){
		$(".myDivClass").click(function(){
			#("#divClick").css("display","block");
			#("#aClick").css("display","none");
		});
		$(".lnk").click(function(){
			#("#divClick").css("display","none");
			#("#aClick").css("display","block");
		});
	});	
</script>

<div class="myDivClass">
	<p>Some Text</p>
	<a class="lnk" href="somepage">A Link</a>
</div>

<div id="divClick">"div" was licked</div>
<div id="aClick">"a" was clicked</div>

Basically, I would like the "a" click to do something different than the "div" click, but when I use the code above, it keeps "assuming" the "a" is part of the "div" and exectues the "divClick"

I was thinking about posting this in the Javascript forum, but I think it has something to do with how my CSS is structured...

Help?


--------

GOOGLE is a great resource to find answers to questions like "how do i..."

http://www.google.com/webhp?complete=1&hl=en

--------

 

[Borvik]

This is most definitely a JavaScript problem.

First this is wrong (and all the lines like it):

#("#divClick").css("display","block");

It should be

$("#divClick").css("display","block");

Second, since the link has an href it is trying to go somewhere - and you won't see the result (I saw it very briefly before I got a page not found error).

Third, because the <a> element is within the div - the div click will happen. If you change the script to something like this:

    $(document).ready(function(){
        $(".myDivClass").click(function(){
            $("#divClick").css("display","block");
            
        });
        $(".lnk").click(function(){
            
            $("#aClick").css("display","block");
        });
    });

So it's not that the "a" click isn't getting triggered its the order of operations that made it seem like it didn't.

The "a" click went and hid the div result, showing the "a" result. Then the div click fired and hid the "a" result, showing only the div result.

They are firing in order from the element that was clicked on out through the parents.

 

[vicvirk]

^

Sorry, it was a bad typing mistake, I meant to type $ but hit the # by accident...

Also, I figured out the issue, I had to use "event.stopPropagation();":

$(".lnk").click(function([COLOR=red]event[/color]){
	[COLOR=red]event.stopPropagation();[/color]
	$("#divClick").css("display","none");
	$("#aClick").css("display","block");        
});

The line in red stopped the "myDiv.click" event....

--------

GOOGLE is a great resource to find answers to questions like "how do i..."

http://www.google.com/webhp?complete=1&hl=en

--------