本文旨在解决动态生成的 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 += ``; } $(".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/[email protected]/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">Utentes
总结
通过使用事件委托和正确的 DOM 元素查找方法，可以有效地解决动态生成的 HTML 元素中点击事件 ID 获取不正确的问题。 这种方法不仅可以确保获取正确的 ID，还可以提高代码的效率和可维护性。 在处理动态生成的 HTML 内容时，建议始终使用事件委托和精确的元素选择器，以避免类似问题的发生。
以上就是如何通过点击的 div 获取正确的 ID的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1598063.html
微信扫一扫 
支付宝扫一扫 
