1

Let's assume I have the following structure:

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

The above code is merely an example to explain the problem so don't pay much attention to it.

Now let's assume I have the following jQuery:

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

Now.. What I want to do is the following:

  • When this event is triggered (i.e. the user clicks anywhere inside the div with ID divid1) to tell me the ID of the div they are currently in. When I say the ID they are in, I mean the ID of the div they actually clicked, even though it's inside divid1. Let's assume they have actually clicked inside divid4. This event is triggered because divid4 is inside divid2 which is inside divid1

Constraints:

  • I do not know ANY of the IDs apart from divid1. This is because I am generating the IDs of all the other divs dynamically and there is no way to know how many divs there are OR what they are called.
James
  • 2,013
  • 3
  • 18
  • 31

3 Answers3

5

Try this:

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

jsFiddle here

Benjamin Crouzier
  • 40,265
  • 44
  • 171
  • 236
  • If you could be so kind as to edit your code and add: return false; after the alert, I will mark your answer as correct. The current code will give 15 alerts if you have 15 levels of nested divs. thank you for the answer :) simple, yet I didn't think of it! haha – James Nov 18 '11 at 18:59
  • 1
    I used `event.stopPropagation();`, but return false is simpler indeed. Check [this question](http://stackoverflow.com/questions/5302903/jquery-event-stopimmediatepropagation-vs-return-false) if you want to know the difference between both. – Benjamin Crouzier Nov 18 '11 at 19:02
2
$("#divid1 div").click(function(){ console.log(this.id);});

See full source of successful test:

<!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>
Calvin Froedge
  • 16,135
  • 16
  • 55
  • 61
  • this is returning undefined to me at the moment. i don't think I've got anything wrong with the code my end. any idea why it might return as undefined? – James Nov 18 '11 at 18:56
  • try replacing `this.id` for `$(this).attr('id')` – gustavotkg Nov 18 '11 at 18:59
  • true. my problem was that i had no idea what the "console.log" was as you assumed I was using it, thus it came back with an error. I'd suggest in the future you give examples with variables and standard methods rather than assuming people use the logs (google told me what it was) – James Nov 18 '11 at 19:14
  • console.log is pretty standard. Are you using IE or something? – Calvin Froedge Nov 18 '11 at 19:20
0
$("#divid1").find().bind('click', function(){
    $(this).attr("id");
});
zaoudis
  • 110
  • 3
  • 10
  • That returns divid1. I need the ID of the actual div that's inside that div and has been clicked i.e. divid4 or divid3 for example. Edit: However, that has to be done with the click event on divid1, unless there is some other reason to not do it. – James Nov 18 '11 at 18:51
  • this does work, but only for 1 level of nested divs. I need this to work for multiple nested divs. In the above code example, if I were to click inside DIVID4, your code returns DIVID2, even though you clicked inside 4, it only goes down 1 level into the code. Do you see the dilemma I have? :( – James Nov 18 '11 at 18:57