Question

我需要对以下情况提出建议。我有一个项目对象，并动态构建一个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);
}

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

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

});

Answer 2

首先，您要向DOM添加多个具有相同id的元素，这是无效的。您应该更改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变量附加到。

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

2 个答案: