Finding parent div ID then all data of that div's child

Question

I'm trying to make something where i click on a title of a div which then pops up a modal with the information of that div. The div is appended in jquery. So now i want when i click on the link it gives me the ID of the parent Div with the class forumItem, then after that returns me certain information of div's within that forumItem. i've tried the closest method but this always returns undefined

The appended div

$(".mainForum").append('<div class="col-md-12 forumItem" id="' + obj.workout_id + '"> <div class="col-md-2 col-xs-2 person"> <img  class="personIcon" src="./resources/images/personIcon.png"></div> <div class="col-md-6 col-xs-6">  <span class="titel noWrap"> <button class="titleButton" onclick="loadModal()"> ' + obj.titel + ' </button> </span> <span class="beschrijving noWrap"> ' + obj.beschrijving + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.categorie + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.persoon + '</span> </div></div>');

i've tried getting the id of the parent div like this but this returns undefined

function loadModal(){
    var divid = $(this).closest(".forumItem").attr("id");
    console.log(divid);
}

Answer 1

You need to pass the current clicked element as a parameter:

$(".mainForum").append('<div class="col-md-12 forumItem" id="' + obj.workout_id + '"> <div class="col-md-2 col-xs-2 person"> <img  class="personIcon" src="./resources/images/personIcon.png"></div> <div class="col-md-6 col-xs-6">  <span class="titel noWrap"> <button class="titleButton" onclick="loadModal(this)"> ' + obj.titel + ' </button> </span> <span class="beschrijving noWrap"> ' + obj.beschrijving + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.categorie + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.persoon + '</span> </div></div>');

then, use the passed parameter as the binded object:

function loadModal(clicked){
    var divid = $(clicked).closest(".forumItem").attr("id");
    console.log(divid);
}

In your code $(this) inside the function, points to the function object itself and not to the clicked element.

A best approach, not polluting the dom with JavaScript events, will be to add a event delegation, that listens to each clicked button. First remove the onclick from the created element:

$(".mainForum").append('<div class="col-md-12 forumItem" id="' + obj.workout_id + '"> <div class="col-md-2 col-xs-2 person"> <img  class="personIcon" src="./resources/images/personIcon.png"></div> <div class="col-md-6 col-xs-6">  <span class="titel noWrap"> <button class="titleButton"> ' + obj.titel + ' </button> </span> <span class="beschrijving noWrap"> ' + obj.beschrijving + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.categorie + '</span> </div> <div class="col-md-2 col-xs-2"> <span class="categorie">' + obj.persoon + '</span> </div></div>');

then create the event delegation listener, hooked to the main container (.mainForm):

$('.mainForum').on('click', '.titleButton', function() {
    var divid = $(this).closest(".forumItem").attr("id");
    console.log(divid);
});

$(".mainForum").append('<div class="forumItem" id="test"><button class="titleButton"> click me</button></div>');

$('.mainForum').on('click', '.titleButton', function() {
  var divid = $(this).closest(".forumItem").attr("id");
  console.log(divid);
});

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

</div>

Hope it helps.