Javascript 如何获取动态生成的p标记中的文本

这不是一个不同的问题，但我仍然无法解决这个问题。我有一个画廊一样的结构，有从firebase检索到的图像。 我有一个图像和一个p元素，我在其中显示员工姓名。当我点击任何图像时，我应该得到相应的员工姓名。在这段代码中，每个元素都是动态生成的。最初我尝试使用此代码

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

此代码不适用于我的案例。 我还尝试了以下代码

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);

}

我的html部分

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

此方法返回一个错误undefined employee1。我还尝试了delegate和live，因为我正在创建无法工作的动态元素。如何在单击图像时获取值。有人能帮我吗？提前谢谢

编辑01 这是一把小提琴

---

在小提琴演奏后编辑：

由于您的代码对我来说不是很清楚，而且我认为您也不清楚，因此我做了以下工作：

我使用Google chrome的开发控制台按F12分析了结构，以下是我的发现：

<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>

应该有用

编辑：

如果您的姓名最接近您的img，请使用： var name=$.firstname.closest.text

试试这个：

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

您应该为动态创建的元素使用事件。下面的代码片段可能会对您有所帮助

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

---

请做一个JS文件。我加了一把小提琴。请参考@KunalKhivensaraI作为小提琴提供了一个工作演示。请参考它@Dan Chaltieri编辑了我的问题，我也有小提琴请参考它@奈德

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

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