0

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

4

3 回答 3

2

在 jsFiddle 上查看这个示例（打开你的 JavaScript 控制台）
（请原谅丑陋的颜色 - 我是程序员而不是设计师；）。 

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

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

于 2012-08-24T09:15:23.447 回答
1

我冒昧地稍微更改了您的代码（仅用于示例）。主要是循环，我还更改了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 示例

于 2012-08-24T11:02:40.457 回答
0

使用身份证

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

或使用 data-* 属性

<div class=panel data-pid=1>

然后

$('.panel').click(function(){
   alert('panel id is: '+$(this).attr('data-pid'));
})
于 2012-08-24T09:14:04.453 回答