本文旨在解决动态生成的HTML元素中，点击事件发生时，如何准确获取与该元素关联的ID值的问题。通过事件委托和DOM遍历，我们将提供一种可靠的方法，确保在复杂的动态环境中，始终能获取到正确的ID，避免因选择器错误而导致的数据获取错误。
在动态生成的HTML结构中，经常会遇到点击事件需要获取特定ID的情况。如果直接使用jQuery选择器，可能会因为DOM结构的变化或选择器范围过大而导致获取到错误的ID。本文将介绍如何使用事件委托和DOM遍历，准确地获取与点击元素相关的ID。
问题分析
原始代码的问题在于，点击.histor-uten元素时，$(“input[name=’id_utt’]”).val() 总是返回第一个匹配的input元素的value，而不是当前点击的.histor-uten元素内部的input元素的value。这是因为选择器$(“input[name=’id_utt’]”)会选择页面上所有name属性为id_utt的input元素，并返回第一个匹配项的值。
解决方案：事件委托与DOM遍历
解决此问题的关键在于：
事件委托： 将事件监听器绑定到父元素，利用事件冒泡机制，监听子元素的点击事件。DOM遍历： 在事件处理函数中，通过DOM遍历，找到当前点击元素内部的input元素，并获取其value。
以下是修改后的代码：
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 += ``; } $(".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);: 获取当前点击的.histor-uten元素。$(this)指向触发事件的DOM元素。if (!parent.hasClass(‘histor-uten’)) { parent = $(this).closest(‘.histor-uten’); }: 确保 parent 变量指向 .histor-uten 元素。 如果点击事件发生在 .histor-uten 元素的子元素上，则使用 .closest() 方法找到最近的父元素 .histor-uten。var id_utt = $(parent.find(“input[name=’id_utt’]”)).val();: 使用parent.find(“input[name=’id_utt’]”)在当前点击的.histor-uten元素内部查找name属性为id_utt的input元素，并获取其value。
完整示例
Get ID Example Utentesvar 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 += ``; } $(".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(); }); });
注意事项
确保事件委托的父元素存在于DOM中。DOM遍历时，选择器要足够精确，避免选择到错误的元素。如果HTML结构发生变化，需要相应地调整DOM遍历的代码。
总结
通过使用事件委托和DOM遍历，可以准确地获取动态生成的HTML元素中与点击事件相关的ID。这种方法避免了全局选择器可能导致的问题，提高了代码的健壮性和可维护性。在复杂的Web应用中，掌握这些技巧至关重要。
以上就是如何在点击的Div中获取正确的ID的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596109.html
微信扫一扫 
支付宝扫一扫 
