本文旨在解决在使用 jQuery 动态生成内容时，点击事件无法获取正确 ID 的问题。通过事件委托和 DOM元素查找，我们将演示如何确保点击事件能够准确地获取到与点击元素相关联的 ID 值，从而避免获取到错误的 ID。
在使用 jQuery 进行动态内容生成时，经常会遇到点击事件无法正确获取目标元素 ID 的情况。这通常是因为事件绑定发生在元素生成之前，或者选择器选取了错误的元素。本教程将通过一个实际案例，详细讲解如何利用事件委托和正确的 DOM 元素查找方法，来解决这个问题。
问题分析
在提供的代码中，点击 .histor-uten 元素时，总是获取到第一个 input[name='id_utt'] 的值，而不是与当前点击元素关联的 input 元素的值。这是因为选择器 $("input[name='id_utt']").val() 总是返回页面上第一个匹配的元素的值，而没有考虑到上下文关系。
解决方案：事件委托和 DOM 元素查找
解决此问题的关键在于使用事件委托，并将查找范围限定在当前点击的元素内部。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 事件委托： 将事件监听器绑定到父元素（例如 .tesssste），利用事件冒泡机制，当子元素 .histor-uten 被点击时，事件会冒泡到父元素，从而触发事件监听器。
- DOM 元素查找： 在事件处理函数中，使用 $(this) 获取当前点击的元素，然后使用 find() 方法在该元素内部查找目标 input 元素。
以下是修改后的代码：
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 元素的点击事件。
- let parent = $(this);: 获取当前点击的 .histor-uten 元素。
- if (!parent.hasClass('histor-uten')) { parent = $(this).closest('.histor-uten'); }: 确保选择器选中了 .histor-uten 元素。
- var id_utt = $(parent.find("input[name='id_utt']")).val();: 在当前点击的 .histor-uten 元素内部查找 input[name='id_utt'] 元素，并获取其值。
完整 HTML 代码
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/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/bootstrap@5.0.0/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>
<script>
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();
});
});
</script>总结
通过使用事件委托和正确的 DOM 元素查找方法，我们可以确保在动态生成的内容中，点击事件能够准确地获取到与点击元素相关联的 ID 值。 这种方法不仅解决了当前问题，也为处理类似的动态内容交互提供了通用的解决方案。 在实际开发中，应根据具体情况灵活运用这些技巧，提高代码的健壮性和可维护性。
