本文旨在解决动态生成的 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();
});
});代码解释
易秀购主题网收集到一款红色的淘宝客主题很不错的，有点想值得买的模板，很适合做淘宝客的童鞋，这款主题需要先去注册阿里妈妈并得到联盟的ID，直接调用淘点金+短代码，大大的方便了添加商品，有简单的SEO功能。如果觉得该模板的SEO功能比较单一不能够满足你，那么你也可以搜索wordpress的SEO插件，很方便。至于如何运营就看自己的了，有大把的人做淘宝客赚了钱，如果通过自己的营销的确可以做的很不错。
事件委托： 使用 $(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 代码
[email protected]/dist/css/bootstrap.min.css"> Utentes
总结
通过使用事件委托和正确的 DOM 元素查找方法，可以有效地解决动态生成的 HTML 元素中点击事件 ID 获取不正确的问题。 这种方法不仅可以确保获取正确的 ID，还可以提高代码的效率和可维护性。 在处理动态生成的 HTML 内容时，建议始终使用事件委托和精确的元素选择器，以避免类似问题的发生。
