Question

这不是另一个问题，但我仍然无法解决此问题。我有一个类似于画廊的结构，其中包含从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>

此方法返回错误未定义的employee1.And我也尝试使用delegate() and live()，因为我正在创建不起作用的动态元素。如何在单击图像时获得值。有人能帮我吗？提前谢谢。

Edit01 这是一个小提琴 https://jsfiddle.net/anusibi/xL9uvt2o/

Answer 1

试试这个：

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

Answer 2

在你的小提琴后编辑：

由于您的代码对我来说并不是很清楚（我认为它不适合您），这就是我所做的：

我使用了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>

您现在可以像这样使用closest tag的JQuery：

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

Answer 3

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

应该工作。

修改

如果你的名字是最接近你的img使用这个： var name = $(".firstname").closest().text();

Answer 4

您应该将事件delgation用于动态创建的元素。以下代码段可能会对您有所帮助。

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

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

4 个答案: