本文旨在解决动态生成的 HTML 元素中，点击事件无法获取正确 ID 的问题。通过事件委托和 DOM 元素查找，我们将提供一种可靠的方法，确保点击事件能够准确地获取与点击元素关联的 ID 值。本文将提供详细的代码示例和解释，帮助开发者解决类似问题。
在动态生成 HTML 内容时，特别是使用循环生成多个相似元素时，经常会遇到点击事件处理中 ID 获取不正确的问题。 根本原因在于，事件处理函数可能错误地选择了页面上的第一个匹配元素，而不是实际被点击的元素。要解决这个问题，需要使用事件委托和正确的 DOM 元素查找方法。
问题分析
原始代码中，点击 .histor-uten 元素时，使用 $("input[name='id_utt']").val() 来获取 ID。 这种方式会选取页面上第一个 name 属性为 id_utt 的 input 元素的值，而不是被点击元素内部的 input 元素的值。
解决方案：事件委托和 DOM 元素查找
以下代码演示了如何使用事件委托和 DOM 元素查找来解决这个问题：
var data = [
{codigo: "1", Utente: "Teste", },
{codigo: "2", Utente: "Teste1", },
{codigo: "3", Utente: "Teste2",},
{codigo: "4", Utente: "Teste3", },
{codigo: "5", Utente: "Teste4", },
{codigo: "6", Utente: "Teste5", },
];
$(document).on('click', '.dad-inf', function(){
var linha = ``;
for (var i = 0; i < data.length; i++) {
codigo = data[i].codigo;
Utente = data[i].Utente;
linha += `<div class="col-md-6 col-xl-3">
<a href="#" class="dropdown-item btn btn-warning histor-uten">
<div class="profile-photo-div" id="profile-photo-div">
<div class="profile-buttons-div">
<div class="profile-img-input" id="profile-img-input">
<label class="butttton" id="change-photo-label" for="change-photo">#${Utente}</label>
<input type="hidden" name="id_utt" value="${codigo}">
</div>
</div>
</div>
</a>
</div>`;
}
$(".tesssste").html(linha);
});
$(document).on('click', '.histor-uten', function(e){
let parent = $(this);
// First make sure it selects the element with the histor-uten class
if(!parent.hasClass('histor-uten')){
parent = $(this).closest('.histor-uten');
}
// Get the child input from the parent instead of the first one in the document
var id_utt = $(parent.find("input[name='id_utt']")).val();
console.log(id_utt);
});
$(function() {
$(".btn-show").click(function(e) {
e.preventDefault();
el = $(this).data('element');
$(el).show();
$("section > div").not(el).hide();
});
});代码解释
事件委托： 使用 $(document).on('click', '.histor-uten', function(e){ ... }); 将点击事件绑定到 document 对象上，然后通过选择器 .histor-uten 来指定事件处理函数只处理点击 .histor-uten 元素的事件。 这种方式被称为事件委托，可以有效地处理动态生成的元素。
查找父元素：let parent = $(this);， this 关键字指向实际被点击的元素。 接下来，使用 $(this).closest('.histor-uten') 确保 parent 变量始终指向具有 histor-uten 类的最近的祖先元素。
查找子元素： 使用 $(parent.find("input[name='id_utt']")).val(); 在被点击元素的父元素内部查找 name 属性为 id_utt 的 input 元素，并获取其值。 parent.find() 确保只在当前被点击元素的范围内查找子元素，从而避免选取到错误的 input 元素。
HTML 代码
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a class="__cf_email__" data-cfemail="60020f0f14131412011020554e514e53" href="/cdn-cgi/l/email-protection">[email protected]</a>/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb8a3bca3be" href="/cdn-cgi/l/email-protection">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<a href="s105" data-element="#minhaDiv105" class="btn-show dad-inf">Utentes</a>
<section id="s105">
<div id="minhaDiv105">
<div class="row tesssste">
</div>
</div>
</section>总结
通过使用事件委托和正确的 DOM 元素查找方法，可以有效地解决动态生成的 HTML 元素中点击事件 ID 获取不正确的问题。 这种方法不仅可以确保获取正确的 ID，还可以提高代码的效率和可维护性。 在处理动态生成的 HTML 内容时，建议始终使用事件委托和精确的元素选择器，以避免类似问题的发生。
