Question

假设我有一个父级| Platform Name | Description | * |-----------------|------------------------------------| * | android | on a device running Android. | * | cordova | on a device running Cordova. | * | core | on a desktop device. | * | ios | on a device running iOS. | * | ipad | on an iPad device. | * | iphone | on an iPhone device. | * | mobile | on a mobile device. | * | mobileweb | in a browser on a mobile device. | * | phablet | on a phablet device. | * | tablet | on a tablet device. | * | windows | on a device running Windows. |，其中包含另外两个div，这些div是使用jQuery动态创建的。当我单击div时，如果我单击第二个div，它将提示或控制其id值，然后它将显示第二个div id属性值

div

for (i=0; i < 3; i++){
       content = "<div class='dataToAppend' id="+i+" style='cursor:pointer; margin:30px; display:inline-block;'>"
       content += '<img id='+i+' src='+i+' >'               
       content += "</div>"
       $(".data").append(content)
}

在此代码段中，当我单击一张图像时，我希望它控制其id属性

Answer 1

您可以将delegated click event绑定到图像：

for (i = 0; i < 3; i++) {
  content = "<div class='dataToAppend' id='div" + i + "' style='cursor:pointer; margin:30px; display:inline-block;'>"
  content += '<img id=' + i + ' src=' + i + ' >'
  content += "</div>"
  $(".data").append(content)
}

$(".data").on('click', 'img', function() { // use a delegated event on the image
  console.log(this.id); // this is the image id

  console.log($(this).parent().attr('id')); // this is the div id
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="data"></div>

请注意，这些ID应该是唯一的，并且您目前已将创建的div和图片ID相同，我在上面进行了编辑，因此它们是不同的

Answer 2

在冒泡阶段的.test元素上捕获click事件，检查事件目标，如果它是div，则获取id，如果它是图像，则获取id中的parentNode。

您可以将 vanillaJS 用于此任务

document.querySelector('.test').addEventListener('click', function(ev) {
  let tgt = ev.target;
  if (tgt.matches('div')) {
    console.log(tgt.id);
  }
  if (tgt.matches('img')) {
    console.log(tgt.parentNode.id);
  }
});

（请注意，您的ID不能以数字开头）

Answer 3

使用香草JavaScript，您只需在for循环之后查询所有三个.dataToAppend div，然后使用forEach()方法返回每个元素的ID。

检查并运行以下代码段，以获取上述内容的实际示例：

var data = document.querySelector(".data");

for (i=0; i < 3; i++){
       content = "<div class='dataToAppend' id=imgDiv"+i+" style='cursor:pointer; margin:30px; display:inline-block;'>";
       content += '<img id='+i+' src=img'+i+' >';            
       content += "</div>";
       data.innerHTML += content;
}

var dataDivs = document.querySelectorAll(".dataToAppend");

dataDivs.forEach(div => {
  div.addEventListener("click", () => console.log(div.id));
});

<div class="data"></div>

NB 。在上面的示例中，我添加了一个非数字字符，以便在CSS中更轻松地定位元素。

Answer 4

您可以使用：

$(document).on('click', '.dataToAppend img', function() {}

要为类中的.dataToAppend的div中的所有图像添加click事件。

接下来，您可以使用$(this).attr('id');来获取您单击的图像的id。

此外，我建议您在for循环中建立一个名为content的字符串（因为.append()是一种运行起来比较昂贵的方法），只有完成后.append() content到您的DOM。这样，您只需一次添加到DOM，而无需多次添加。

请参见下面的工作示例：

let content = "";
for (i = 0; i < 3; i++) {
  content += "<div class='dataToAppend' id=" + i + " style='cursor:pointer; margin:30px; display:inline-block;'>"
  content += '<img id=' + i + ' src=' + i + ' >'
  content += "</div>"
}
$(".data").append(content);

$(document).on('click', '.dataToAppend img', function() {
  let id = $(this).attr("id");
  console.log(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="data"></div>

如何获取任何父div单击哪个子div的id值

4 个答案: