javascript - 具有相同名称的嵌套Div，一键选择正确的

我有一个嵌套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>

最佳答案

我已经采取了稍微更改代码的自由（仅作为示例）。主要是循环，我还更改了id属性以添加更多信息-现在您可以确切地看到所处的级别。如果您觉得它适合您的需求，那么您可以将其完全引入您的应用程序中。

您在评论中提到.live()函数可以解决您的问题，但是从jQuery 1.7开始不推荐使用此功能，如果不能使用delegate()，建议使用live()函数代替on() 。所以这是我使用delegate()函数的解决方案。

如您所见，语法仅与我们将回调附加到container元素并指定要使用的内部选择器类似，在我们的例子中，它是任何.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 example