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!

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

JavaScript and DOM and nested <divs> 1

Status
Not open for further replies.
areznik

areznik

Programmer
Aug 7, 2002
25
US
Hi,
so here is the question:
i have nested <div> tags like this:

<div id=&quot;1&quot;...onclick=&quot;javascript: alert(this)&quot;>
<div id=&quot;2&quot;...>
<div id=&quot;3&quot;...>
</div>
</div>
</div>

and when i do onclick for div 1, everything is ok, i get 1
HOWEVER,
when i do the same for div 2, i get 2 alerts!!! wth?
the first one i get id = 2, and the second i get its parent's id !!! why? oh why?
i searched everywhere in the ecma specs, nothing says that is the behaivor...maybe i am doing something wrong, maybe i am not using the id tag correctly...after all there may be some css issue, before i go any further, i thought i would ask here...
Thanks in advance to all those who will read my incoherent ramblings and try to make some sence outta this...
--Alex
 
Sort by date Sort by votes
It does make sense in a way because they are nested
sorta like if statements in javascript.

Do they have to be nested??

Can you try spans inside the div closing each one
(don't nest the spans)??

2b||!2b
 
Upvote 0 Downvote
I think you will have some fairly big problems with nested divs.. Have a look at this:
Code: 
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd&quot;>[/URL]
<html>
<head>
<title>Test Bed</title>
<style type=&quot;text/css&quot;>
div {
	border: 1px solid black;
	margin: 10px;
	padding: 20px;
	width: 100px;
	height: 100px;
}
#A {background-color: #DDDDDD;}
#B {background-color: #BBBBBB;}
#C {background-color: #999999;}
</style>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
</script>
</head>
<body>
<div id=&quot;A&quot; onclick=&quot;alert(this.id);&quot;>
|
  <div id=&quot;B&quot; onclick=&quot;alert(this.id);&quot;>
  ||
    <div id=&quot;C&quot; onclick=&quot;alert(this.id);&quot;>
    |||
    </div>
  </div>
</div>
</body>
</html>

it gives in IE 3 boxes one around the other, and in Firebird 3 boxes that look like cascaded windows...

I'd steer clear :)

Posting code? Wrap it with code tags: [ignore]
Code: 
[/ignore][code]CodeHere
[ignore][/code][/ignore].
 
Upvote 0 Downvote
I tested it. it work with cancelBubble. here is the code:

Code: 
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
function checkId()
{
   window.event.cancelBubble = true;
   alert(window.event.srcElement.id);
}

</script>
</head>
<body>
<div id=&quot;A&quot; onclick=&quot;checkId()&quot;>
|
  <div id=&quot;B&quot; onclick=&quot;checkId()&quot;>
  ||
    <div id=&quot;C&quot; onclick=&quot;checkId()&quot;>
    |||
    </div>
  </div>
</div>
 
Upvote 0 Downvote
And the crossbrowser way of er, canceling the event's bubble:
(IE6 & Firebird)
Code: 
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
function check(divObj, evt) {
	evt.cancelBubble = true;
	alert(divObj.id);
}
</script>
</head>
<body>
<div id=&quot;A&quot; onclick=&quot;check(this, event);&quot;>
|
  <div id=&quot;B&quot; onclick=&quot;check(this, event);&quot;>
  ||
    <div id=&quot;C&quot; onclick=&quot;check(this, event);&quot;>
    |||
    </div>
  </div>
</div>

Posting code? Wrap it with code tags: [ignore]
Code: 
[/ignore][code]CodeHere
[ignore][/code][/ignore].
 
Upvote 0 Downvote
Ok, thanks everybody for the answers, the cancelBubble thing is what did the trick..i guess i have some studying to do about this..
basically i wanted to have nested divs because i am building a tree-like structure with some java on the server side and then showing it in the browser..so when i clicked on the branch, i wanted all its children to show up in my id list, but not its parents...thanks again for all the help, i am sure i will be back soon.
--Alex
 
Upvote 0 Downvote
The same thing seems to work for span tags. Now I just need to figure out how to find all the elements within a span...

Dave

"Credit belongs to the man who is actually in the arena - T.Roosevelt
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
702
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
161
Daniel K
Daniel K
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
274
rogerte
rogerte
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
639
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top