Question

我有一个问题，我有同一个类的嵌套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>

Answer 1

查看此example on jsFiddle (open your JavaScript console)
（请原谅丑陋的颜色 - 我是程序员而不是设计师;）。

$(function(){
    $('.panel').on('click',function(e){
       console.log($(this));
       return false;
    });
});

当您捕获单击以停止将事件冒泡回到包含元素时，您所要做的就是返回false。

Answer 2

我冒昧地稍微更改了你的代码（仅用于示例）。主要是循环，我还更改了id属性以添加更多信息 - 您现在可以确切地看到您所处的级别。如果您认为它符合您的需求，那么您可以通过各种方式将其应用到您的应用程序中

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

Answer 3

使用id

<div class="panel" id="panel_1">
    <div class="panel" id="panel_2">
...

或使用data- * attributes

<div class=panel data-pid=1>

然后

$('.panel').click(function(){
   alert('panel id is: '+$(this).attr('data-pid'));
})

嵌套Div具有相同的名称，选择正确的一次单击

3 个答案:

jsFiddle example