How to get the id value of which child div is clicked of any parent div

Question

Suppose I have a parent div which contains two more div which are created dynamically using jQuery. When I click on div one then it will alert or console its id value if I clicked on the second div then it will show the second div id attribute value

 for (i=0; i < 3; i++){ content = "<div class='dataToAppend' id="+i+" style='cursor:pointer; margin:30px; display:inline-block;'>" content += '<img id='+i+' src='+i+' >' content += "</div>" $(".data").append(content) } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="data"></div> 

In this snippet when I click on one image then I want it console its id attribute

Answer 1

You can bind a delegated click event to the images:

 for (i = 0; i < 3; i++) { content = "<div class='dataToAppend' id='div" + i + "' style='cursor:pointer; margin:30px; display:inline-block;'>" content += '<img id=' + i + ' src=' + i + ' >' content += "</div>" $(".data").append(content) } $(".data").on('click', 'img', function() { // use a delegated event on the image console.log(this.id); // this is the image id console.log($(this).parent().attr('id')); // this is the div id }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="data"></div> 

Please note that ids should be unique and you currently have your div and image ids being created the same, I edited above so they are different

Answer 2

Capture the click event in its bubbling phase on the .test element, check the event target, and, if it's a div then get the id else if it's an image get the id of its parentNode .

You may use vanillaJS for this task

document.querySelector('.test').addEventListener('click', function(ev) {
  let tgt = ev.target;
  if (tgt.matches('div')) {
    console.log(tgt.id);
  }
  if (tgt.matches('img')) {
    console.log(tgt.parentNode.id);
  }
});

(As a side note, your id can't start with a digit)

Answer 3

With vanilla JavaScript, you can just query all three .dataToAppend divs after the for loop and use the forEach() method to return the id of each element.

---

Check and run the following Code Snippet for a practical example of what I have described above:

 var data = document.querySelector(".data"); for (i=0; i < 3; i++){ content = "<div class='dataToAppend' id=imgDiv"+i+" style='cursor:pointer; margin:30px; display:inline-block;'>"; content += '<img id='+i+' src=img'+i+' >'; content += "</div>"; data.innerHTML += content; } var dataDivs = document.querySelectorAll(".dataToAppend"); dataDivs.forEach(div => { div.addEventListener("click", () => console.log(div.id)); }); 

 <div class="data"></div> 

---

NB In the above example, I have appended a non-numeric character for easier element targeting in CSS.

Answer 4

You can use:

$(document).on('click', '.dataToAppend img', function() {}

To add a click event to all your imgaes within the div with the class .dataToAppend .

Next, you can use $(this).attr('id'); to get the id of the image you clicked on.

Also, I suggest you build up a string called content in your for loop (as .append() is a somewhat expensive method to run), and only once that is complete you .append() the content to your DOM. This way you are only adding to the DOM once, rather than multiple times.

See working example below:

 let content = ""; for (i = 0; i < 3; i++) { content += "<div class='dataToAppend' id=" + i + " style='cursor:pointer; margin:30px; display:inline-block;'>" content += '<img id=' + i + ' src=' + i + ' >' content += "</div>" } $(".data").append(content); $(document).on('click', '.dataToAppend img', function() { let id = $(this).attr("id"); console.log(id); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="data"></div>