I have an issue where I have nested divs with the same class. For instance I have something like Panel, inside of Panel. However, when I click on the panel inside the first panel, it is the first panel that triggers the
$(\".panel\").click
function. However, I need to somehow drill down to the panel which the mouse actually clicked on. In other words if I had the following code:
<div class=\"panel\"> //first panel
<div class=\"panel\"> //second panel
</div>
</div>
When I want the second panel to trigger the click, I instead get the parent panel triggering the click. This makes sense given the second panel is wrapped in the first panel. However, I was wondering if there is a way around this? In theory, the code that I am writing can have an infinite ammount of panels inside of other panels. Is there a way to drill all the way down to the panel that the mouse has clicked on? (not the containing panel)
EDIT:
Here is the entire code segment:
<style type=\"text/css\">
body
{
height: 700px;
}
.gridSegment
{
width: 50%;
height: 50%;
float: left;
outline: 2px solid black;
}
</style>
<script type=\"text/javascript\">
$(document).ready(function(){
var lastID = 10;
$(\".gridSegment\").dblclick(function(){
console.log($(this).attr(\"ID\"));
lastID++;
$(this).append(\"<div class=\'gridSegment\' id=\'\" + lastID + \"\'></div>\");
lastID++;
$(this).append(\"<div class=\'gridSegment\' id=\'\" + lastID + \"\'></div>\");
lastID++;
$(this).append(\"<div class=\'gridSegment\' id=\'\" + lastID + \"\'></div>\");
lastID++;
$(this).append(\"<div class=\'gridSegment\' id=\'\" + lastID + \"\'></div>\");
return false;
});
});
</script>
</head>
<body>
<div class=\'gridSegment\'>
<div class=\'gridSegment\' id =\"1\"></div>
<div class=\'gridSegment\' id =\"2\"></div>
<div class=\'gridSegment\' id =\"3\"></div>
<div class=\'gridSegment\' id =\"4\"></div>
</div>
</body>
Rating:
The post javascript – Nested Divs with the same name, select the correct one one click appeared first on Javascript ASK.
via Javascript ASK http://javascriptask.phpfogapp.com/javascript-nested-divs-with-the-same-name-select-the-correct-one-one-click.html
No comments:
Post a Comment