如何通过点击的 div 获取正确的 ID_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何通过点击的 div 获取正确的 ID

2025-11-22

浏览次数：次

返回列表

如何通过点击的 div 获取正确的 id

本文旨在解决动态生成的 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 += `<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();
    });
});

代码解释

wordpress淘宝客主题：Love Shopping红色大气主题

易秀购主题网收集到一款红色的淘宝客主题很不错的，有点想值得买的模板，很适合做淘宝客的童鞋，这款主题需要先去注册阿里妈妈并得到联盟的ID，直接调用淘点金+短代码，大大的方便了添加商品，有简单的SEO功能。如果觉得该模板的SEO功能比较单一不能够满足你，那么你也可以搜索wordpress的SEO插件，很方便。至于如何运营就看自己的了，有大把的人做淘宝客赚了钱，如果通过自己的营销的确可以做的很不错。

0 查看详情 wordpress淘宝客主题：Love Shopping红色大气主题

事件委托： 使用 $(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/<a class="__cf_email__" data-cfemail="60020f0f14131412011020554e514e53" 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="8defe2e2f9fef9ffecfdcdb8a3bca3be" 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>

总结

通过使用事件委托和正确的 DOM 元素查找方法，可以有效地解决动态生成的 HTML 元素中点击事件 ID 获取不正确的问题。这种方法不仅可以确保获取正确的 ID，还可以提高代码的效率和可维护性。在处理动态生成的 HTML 内容时，建议始终使用事件委托和精确的元素选择器，以避免类似问题的发生。

以上就是如何通过点击的 div 获取正确的 ID的详细内容，更多请关注其它相关文章！

# 很不错 # 北京网站建设方案定制 # 嘉定营销推广多少费用 # 网络推广网站推广方案设计怎么写 # 市场营销和推广哪个好做 # 贝壳营销推广怎么操作 # 什么是飘窗网站推广方案 # 大理网站优化外包 # 高级seo是什么水平 # 淄博seo系统工具 # 合理布局seo # 而不是 # 拖放 # 解决这个问题 # 不正确 # 有效地 # css # 第一个 # 选择器 # 自己的 # 淘宝 # .net # 点击事件 # cdn # ai # npm # go # ajax # bootstrap # js # html # jquery

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：J*aScript函数式编程_函子与Monad

下一篇：J*aScript存储机制_IndexedDB事务操作指南

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

如何通过点击的 div 获取正确的 ID