我有一个问题，我用同一个类嵌套了div。例如，我有一个类似Panel的东西，在Panel里面。然而，当我点击第一个面板内的面板时，它是触发的第一个面板
$(".panel").click
功能。然而，我需要以某种方式深入到鼠标实际点击的面板。换句话说，如果我有以下代码：
<div class="panel"> //first panel
<div class="panel"> //second panel
</div>
</div>
当我想让第二个面板触发点击时，我会让父面板触发点击。考虑到第二面板被包裹在第一面板中，这是有意义的。然而，我想知道是否有办法解决这个问题？理论上，我正在编写的代码可以在其他面板中有无限数量的面板。有没有一种方法可以一直钻到鼠标单击的面板？（不是包含面板）
编辑：
这是整个代码段：
<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>
在jsFiddle（打开您的JavaScript控制台）上查看此示例
（请原谅那些难看的颜色——我是程序员而不是设计师；）
$(function(){
$('.panel').on('click',function(e){
console.log($(this));
return false;
});
});
您所要做的就是在捕获单击时返回false，以阻止事件冒泡返回到包含元素。
我已经随意地稍微更改了您的代码（仅用于示例）。主要是循环，我还更改了id属性，以添加更多信息-您现在可以确切地看到您所处的级别。如果您觉得它符合您的需求，那么您可以在应用程序中采用它。
您在评论中提到.live()函数解决了您的问题，但从jQuery 1.7起，该功能已被弃用，如果您不能使用on()，建议使用delegate()函数代替live()。这是我使用delegate()函数的解决方案。
正如您所看到的，语法是相似的，只是我们将回调附加到容器元素，并指定要使用的内部选择器——在我们的情况下，它是任何.gridSegment元素。
$("#body").delegate(".gridSegment", "dblclick", function() {
var $thisCached = $(this);
console.log($thisCached,$(this).parent());
var lastId = $thisCached.attr("id");
var limit = 4;
var counter = 1;
while(counter <= limit){
var newId = lastId + '_' + counter;
counter++;
$thisCached.append("<div class='gridSegment' id='" + newId + "'></div>");
}
return false;
});
请注意，我的包装器是一个元素，id为body
jsFiddle示例
使用id的
<div class="panel" id="panel_1">
<div class="panel" id="panel_2">
...
或使用数据-*属性
<div class=panel data-pid=1>
然后
$('.panel').click(function(){
alert('panel id is: '+$(this).attr('data-pid'));
})