Javascript 在jQuery中访问动态附加的div元素

我需要一个关于以下场景的建议。 我有一个items对象，并动态构建一个html对象，如下所示：

$.each(item,function(k, iteminner) {
    html += '<td><div id="outerdiv">' + iteminner.Name + '</div>';
    html += '<div id="clickme"></div></td>';
});

---

假设id对于两个div都是唯一的，比如

id=“outerdiv”+k

，当第二个div

id=“clickme”+2

被单击时，我如何访问第二个单元格中存在的元素？

首先，您将使用相同的

id

向DOM添加多个元素，这是无效的。您应该更改HTML以使用类，如下所示：

$.each(item, function(k, iteminner) {
    html += '<td><div class="outerdiv">' + iteminner.Name + '</div><div class="clickme"></div></td>';
});

---

请注意，我使用了

document

作为上面的主选择器。理想情况下，您应该使用最近的静态父元素-我建议您使用与将

html

变量附加到相同的选择器。

首先，您将使用相同的

id

将多个元素附加到DOM，这是无效的。您应该更改HTML以使用类，如下所示：

$.each(item, function(k, iteminner) {
    html += '<td><div class="outerdiv">' + iteminner.Name + '</div><div class="clickme"></div></td>';
});

---

请注意，我使用了

document

作为上面的主选择器。理想情况下，您应该使用最接近的静态父元素-我建议您使用与将

html

变量附加到的选择器相同的选择器。

ID的必须唯一

// Use class instead
$.each(item, function(k, iteminner) {
  html += '<td><div class="outerdiv">' + iteminner.Name + '</div>';
  html += '<div class="clickme"></div></td>';
});


// You need to have event delegation here as a direct onclick wont be binded for the dynamically created .clickme
$(document).on("click", ".clickme", function(){

  // You need to fetch the html of .outerdiv, so traverse to it first.
  var _html = $(this).closest("td").find(".outerdiv").html();
  alert(_html);

});

//改用类
$.each（项目，功能（k，项目内部）{
html+=''+iteminner.Name+''；
html+=''；
});
//您需要在此处进行事件委派，因为动态创建的事件不会绑定直接onclick。clickme
$（文档）。在（“单击”，“单击我”，函数（）上）{
//您需要获取.outerdiv的html，因此首先遍历它。
var _html=$（this）.closest（“td”）.find（“.outerdiv”）.html（）；
警报（_html）；
});

ID的必须是唯一的

// Use class instead
$.each(item, function(k, iteminner) {
  html += '<td><div class="outerdiv">' + iteminner.Name + '</div>';
  html += '<div class="clickme"></div></td>';
});


// You need to have event delegation here as a direct onclick wont be binded for the dynamically created .clickme
$(document).on("click", ".clickme", function(){

  // You need to fetch the html of .outerdiv, so traverse to it first.
  var _html = $(this).closest("td").find(".outerdiv").html();
  alert(_html);

});

//改用类
$.each（项目，功能（k，项目内部）{
html+=''+iteminner.Name+''；
html+=''；
});
//您需要在此处进行事件委派，因为动态创建的事件不会绑定直接onclick。clickme
$（文档）。在（“单击”，“单击我”，函数（）上）{
//您需要获取.outerdiv的html，因此首先遍历它。
var _html=$（this）.closest（“td”）.find（“.outerdiv”）.html（）；
警报（_html）；
});

Id必须是唯一的。更改$（“#clickme”）以正确使用“或“Id必须是唯一的。更改$（“#clickme”）以正确使用”或