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

【问题标题】：Accessing dynamically appended div elements in jQuery在 jQuery 中访问动态附加的 div 元素
【发布时间】：2016-04-04 17:11:14
【问题描述】：

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

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

table 以这种格式构建，其中每个框将在每个 td 中包含一个名称和按钮。当用户单击单元格的按钮时，我想分别显示名称。我在这里缺少什么？

$('#clickme").click() {
    alert($("#outerdiv").iteminner.name);
}

假设两个 div 的 id 都是唯一的，例如 id="outerdiv" + k ，当点击第二个 div id="clickme" + 2 时，如何访问第二个单元格中的元素？

【问题讨论】：

Id 必须是唯一的。
更改 $('#clickme") 以正确使用 " 或 '

标签： javascript jquery html arrays

【解决方案1】：

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

});

【讨论】：

【解决方案2】：

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

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

从那里您需要在.clickme 元素上使用委托事件处理程序（因为它们是在 DOM 加载后动态创建的）来遍历 DOM 并找到它们的兄弟.outerdiv。试试这个：

$(document).on('click', '.clickme', function() {
    var name = $(this).siblings('.outerdiv').text();
    // do something with name here...
});

请注意，我使用document 作为上面的主要选择器。理想情况下，您应该使用最近的静态父元素 - 我建议您使用用于将 html 变量附加到的相同选择器。

【讨论】：