Fatal编程技术网
  • javascript/
  • Javascript 使用相同名称的嵌套div，单击选择正确的div

Javascript 使用相同名称的嵌套div，单击选择正确的div

javascript jquery

Javascript 使用相同名称的嵌套div，单击选择正确的div,javascript,jquery,Javascript,Jquery,我有一个问题，就是我在同一个类中嵌套了div。例如，我有一些类似于面板的东西，在面板内部。但是，当我单击第一个面板内的面板时，触发 $(".panel").click 功能。然而，我需要以某种方式深入到鼠标实际点击的面板。换句话说，如果我有以下代码： <div class="panel"> //first panel <div class="panel"> //second panel </div> </div>

我有一个问题，就是我在同一个类中嵌套了div。例如，我有一些类似于面板的东西，在面板内部。但是，当我单击第一个面板内的面板时，触发

 $(".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>


身体
{
高度：700px；
}
.网格段
{
宽度：50%；
身高：50%；
浮动：左；
外形：2倍纯黑；
}
$（文档）.ready（函数（）{
var-lastID=10；
$（“.gridSegment”）.dblclick（函数（）{
log（$（this.attr（“ID”））；
lastID++；
$（此）。追加（“”）；
lastID++；
$（此）。追加（“”）；
lastID++；
$（此）。追加（“”）；
lastID++；
$（此）。追加（“”）；
返回false；
});
});
使用id

<div class="panel" id="panel_1">
    <div class="panel" id="panel_2">
...
使用身份证

<div class="panel" id="panel_1">
    <div class="panel" id="panel_2">
...
看看这个
（请原谅这些难看的颜色——我是程序员而不是设计师；）

当捕获单击以停止事件冒泡返回到包含元素时，只需返回false

看看这个
（请原谅这些难看的颜色——我是程序员而不是设计师；）

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

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

您在评论中提到，
.live（）
函数可以解决您的问题，但是从jQuery 1.7开始，此功能已被弃用，如果无法使用
on（）
，建议使用
委托（）
函数代替
live（）
。下面是我使用
delegate（）
函数的解决方案

正如您所看到的，语法类似于我们将回调附加到容器元素，并指定要使用的内部选择器——在我们的示例中，它是any
.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;
});

$（“#body”）.delegate（“.gridSegment”，“dblclick”，function（）{
var$thisCached=$（this）；
log（$thisCached，$（this.parent（））；
var lastId=$thisCached.attr（“id”）；
var限值=4；
var计数器=1；

while（counter我已经自由地稍微更改了您的代码（仅举个例子）。主要是循环，我还更改了
id
属性以添加更多的信息-您现在可以确切地看到您所处的级别。如果您觉得它适合您的需要，那么您可以想尽一切办法将其应用到您的应用程序中

您在一篇评论中提到，
.live（）
函数可以解决您的问题，但是从jQuery 1.7开始，此功能已被弃用，如果无法使用
on（）
函数，建议使用
委托（）
函数代替
live（）
。因此，下面是我使用
委托（）
函数的解决方案

正如您所看到的，语法类似于我们将回调附加到容器元素，并指定要使用的内部选择器——在我们的示例中，它是any
.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;
});



$（“#body”）.delegate（“.gridSegment”，“dblclick”，function（）{
var$thisCached=$（this）；
log（$thisCached，$（this.parent（））；
var lastId=$thisCached.attr（“id”）；
var限值=4；
var计数器=1；

while（counter）这些div是否有任何父级，如
div
？这些div是否有任何父级，如
div
？嗯，很奇怪。似乎单击的执行顺序是自上而下而不是自下而上。换句话说，只要我单击，它就会看到包装面板并停在那里。它会返回相同的面板（我已分配ID）哪一个是父面板。您可以用您正在使用的更多代码更新您的帖子吗？正如您从我发布的JSFIDLE示例中看到的，这应该可以工作……我已经发布了其余的代码。似乎当Jquery添加到新的网格段中时，您所提供的代码解决方案由于某种原因不再工作……啊…动态添加元素…没问题：）查看我的更新…只需将
click（）
更改为
on（'click'）
，这就是为什么我更喜欢后端web开发而不是前端web开发的原因。我觉得我浪费了很多时间修复只需要“用不同的措辞”的bug.Hmmm，奇怪。似乎单击的执行顺序是自上而下而不是自下而上。换句话说，只要我单击，它就会看到包装面板并停在那里。它会返回相同的面板（我已分配ID）哪一个是父面板。您可以用您正在使用的更多代码更新您的帖子吗？正如您从我发布的JSFIDLE示例中看到的，这应该可以工作……我已经发布了其余的代码。似乎当Jquery添加到新的网格段中时，您所提供的代码解决方案由于某种原因不再工作……啊…动态添加元素…没问题：）查看我的更新…只需将
click（）
更改为
on（'click'）$("#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;
});