Question

我们假设我有以下结构：

<div id="divid1">
  <div id="divid2">
    <div id="divid3">
    </div>
    <div id="divid4">
    </div>
  </div>
  <div id="divid5">
   </div>
</div>

以上代码仅仅是解释问题的一个例子，所以不要过多关注它。

现在让我们假设我有以下jQuery：

$("#divid1").click(function(){});

现在..我想做的是以下内容：

当触发此事件时（即用户点击div中任意位置ID ID为divid1）告诉我他们当前所在的div的ID。当我说出他们所在的ID时，我指的是div的ID他们实际点击了，即使它在divid1内。让我们假设他们实际上已经点击了divid4。触发此事件是因为divid4位于divid2

divid1

约束：

除了divid1，我不知道任何ID。这是因为我正在动态地生成所有其他div的ID，并且无法知道有多少div或者它们被称为什么。

Answer 1

试试这个：

$("#divid1 div").click(function(){
  alert($(this).attr("id"));
  return false; // avoid parents divs if you have nested divs
});

jsFiddle here

Answer 2

$("#divid1 div").click(function(){ console.log(this.id);});

查看成功测试的完整来源：

<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#divid1 div").click(function(){ console.log(this.id);});
});
</script>
<style type="text/css" rel="stylesheet">
    div { display:block;height:20px;background:#000;}
</style>
</head>
<body>
<div id="divid1">
  <div id="divid2">
    <div id="divid3">
    </div>
    <div id="divid4">
    </div>
  </div>
  <div id="divid5">
   </div>
</div>

</body>
</html>

Answer 3

$("#divid1").find().bind('click', function(){
    $(this).attr("id");
});

Answer 4

<script type="text/javascript">
    function GetId(obj)
    {
        return document.getElementById(obj.id).id;
    }
</script>

<div id="divid1" onclick='GetId(this);'>
    <div id="divid2" onclick='GetId(this);'>
        <div id="divid3" onclick='GetId(this);'>
    </div>
    <div id="divid4" onclick='GetId(this);'>
    </div>
</div>
<div id="divid5" onclick='GetId(this);'>
</div>

点击查找div id

4 个答案: