本文旨在解决在使用 jQuery 动态生成包含隐藏 input 元素的 div 时，点击不同 div 获取到相同 ID 的问题。通过事件委托和查找父元素的方式，确保每次点击都能准确获取到对应 div 中 input 元素的正确值。
在使用 jQuery 动态生成 HTML 元素时，尤其是涉及到事件处理和数据获取，很容易遇到一些问题。本文将详细介绍如何在使用 jQuery 动态生成包含隐藏 input 元素的 div 列表时，正确获取到被点击 div 对应的 ID 值。
问题描述
假设你有一个动态生成的用户列表，每个用户都包含一个隐藏的 input 元素，用于存储用户的 ID。当点击某个用户时，你需要获取该用户的 ID。然而，由于所有动态生成的 input 元素都具有相同的 name 属性，直接使用 $("input[name='id_utt']").val() 获取到的总是第一个 input 元素的值，而不是当前点击的那个。
解决方案：事件委托和查找父元素
解决这个问题的关键在于使用事件委托和查找父元素的方式。
事件委托: 将事件监听器绑定到父元素上，而不是直接绑定到动态生成的子元素上。这样可以确保即使子元素是动态生成的，事件监听器也能正常工作。
查找父元素: 在事件处理函数中，通过 $(this) 获取到当前点击的元素，然后使用 .closest() 方法找到包含 input 元素的最近的父元素。这样就可以在该父元素范围内查找 input 元素，从而获取到正确的 ID 值.
代码示例
以下是修改后的代码示例：
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){ ... });: 这行代码使用了事件委托，将 click 事件监听器绑定到了 document 对象上，并指定了只有点击 class 为 .histor-uten 的元素时才会触发该事件。
- let parent = $(this);: 获取当前点击的元素，并赋值给 parent 变量。
- if(!parent.hasClass('histor-uten')){parent = $(this).closest('.histor-uten');}: 确保选择器选择的是具有 histor-uten 类的元素。
- var id_utt = $(parent.find("input[name='id_utt']")).val();: 这行代码首先使用 $(this).closest('.histor-uten') 找到包含 input 元素的最近的父元素（class 为 .histor-uten 的 div），然后在该父元素范围内使用 find("input[name='id_utt']") 查找 input 元素，最后使用 .val() 方法获取其值。
HTML 结构
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a class="__cf_email__" data-cfemail="e5878a8a919691978495a5d0cbb4cbb6" 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="93f1fcfcf7f0f7f1e2f3d3a6bdd2bdc0" 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>注意事项
- 确保 .histor-uten 类选择器能够唯一标识包含 input 元素的父元素。
- 如果 HTML 结构发生变化，需要相应地调整 .closest() 方法的参数。
总结
通过使用事件委托和查找父元素的方式，可以有效地解决在使用 jQuery 动态生成 HTML 元素时，获取到错误 ID 值的问题。这种方法不仅适用于获取 input 元素的值，还可以用于获取其他任何需要根据点击元素动态获取的数据。理解和掌握这种技巧对于编写健壮的 jQuery 代码至关重要。
