[英]How to get the text within p tag that is generated dynamically
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. 我有一个像画廊这样的结构,具有从firebase检索的图像。 I am having a image and a p
element where I display employee name. 我在显示员工姓名的地方有一个图片和一个p
元素。 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 我的html部分
<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. 这个方法返回一个错误的undefined employee1。我也尝试了delegate() and live()
因为我创建的动态元素不起作用,如何获得点击图像的价值。 Can someone help me? 有人能帮我吗? Thanks in advance. 提前致谢。
Edit01 Here is a fiddle https://jsfiddle.net/anusibi/xL9uvt2o/ Edit01这是一个小提琴https://jsfiddle.net/anusibi/xL9uvt2o/
Try this: 尝试这个:
$(document).on("click", ".employeeimages", function(){
var name = $(this).closest(".firstname").text();
alert(name);
});
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 : 我使用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>
You can now use the closest tag of JQuery like this : 您现在可以像这样使用最接近的JQuery 标签 :
$(".employeeimages").click(function())
{
var name = $(this).closest(".firstname").text();
alert(name);
}
$(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();
如果您的名字最接近您的img,请使用: var name = $(".firstname").closest().text();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.