How to get the text within p tag that is generated dynamically

Question

This is not different question but still I am not able to resolve this problem. I have a gallery like structure that has images retrieved from firebase. I am having a image and a p element where I display employee name. When I click any image I should get the respective employee name. In this code every element is generated dynamically. Initially I tried with this code

$(".employeeimages").click(function())
{
    var name = $(".firstname").text();
    alert(name);
}

This code did not work for my case. I tried on with the following code also

refForEmployee.on("value", function(snapshot) {
    var data = snapshot.val();
    var list = [];
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            name = data[key].image ? data[key].image : '';
           emp_name = data[key].emp_name ? data[key].emp_name : '';
            if (name.trim().length > 0) {
                list.push({
                    image: name,
                    emp_name: emp_name
                })
            }
        }
    }
    // refresh the UI
    refreshUI(list);
    employeedetails(list);
    console.log(list);
});


function refreshUI(list) {
    var lis = '';
    for (var i = 0; i < list.length; i++) {
      var empname = list[i].emp_name;
              lis += '<div class="outlining"><div class="customize"><img class="employeeimages" src="' + list[i].image +'" style="height:97px;width:73px"></img><img src="img/bookingemployeeid.png" class="employee_id_display"><p onclick="gettingemployee_detail('+list[i].emp_name+')" class="firstname">'+list[i].emp_name+'<p class="lastname">Last name</p><p class="emps_id">1001</p></div></div>';
    };
    document.querySelector('#employee_list').innerHTML = lis;
};
function gettingemployee_detail(name)
{

    var TextInsideLi = document.querySelector('.firstname').innerHTML;
    console.log(name);

}

My html part

<div id="employee_list"></div>

This method returns an error undefined employee1.And also I tried with delegate() and live() since I am creating dynamic elements that doesn't work.How do I get the value on clicking the image. Can someone help me? Thanks in advance.

Edit01 Here is a fiddle https://jsfiddle.net/anusibi/xL9uvt2o/

Answer 1

Try this:

$(document).on("click", ".employeeimages", function(){
  var name = $(this).closest(".firstname").text();
  alert(name);
});

Answer 2

EDIT after your fiddle :

Since your code is not really clear for me (and I can think it's not either for you), here's what I've done :

I used Google chrome's dev console (press F12) to analyse the structure and here is what I find :

<div class="outlining">
  <div class="customize">
    <img class="employeeimages" src="data:image/jpeg;[...]" style="height:97px;width:73px">
    <img src="img/bookingemployeeid.png" class="employee_id_display">
    <p onclick="gettingemployee_detail([...],0)" class="firstname">employee1</p>
    <p class="lastname">Last name</p>
    <p class="emps_id">1001</p>
  </div>
</div>

You can now use the closest tag of JQuery like this :

$(".employeeimages").click(function())
{
    var name = $(this).closest(".firstname").text();
    alert(name);
}

Answer 3

$(document).on("click",".employeeimages", function(){
    var name = $(".firstname").text();
    alert(name);
});

Should work.

Edit:

If your name is the closest to your img use this: var name = $(".firstname").closest().text();

Answer 4

You should use event delgation for dynamically created element. Following code snippet may help you.

$('body').on('click', '.employeeimages', function () {
     var name = $(this).closest('.customize').find('.firstname').text();
     alert(name);
});