Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Link within clickable div

Status
Not open for further replies.

vicvirk

Programmer
Feb 4, 2009
636
CA
Hi,

I have this:

Code:
<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..."


--------
 
This is most definitely a JavaScript problem.

First this is wrong (and all the lines like it):
Code:
#("#divClick").css("display","block");
It should be
Code:
$("#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:
Code:
    $(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.
 
^

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();":

Code:
$(".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..."


--------
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top