如何通过点击的 div 获取正确的 ID-html教程-PHP中文网

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

碧海醫心

发布： 2025-11-22 13:01:26

原创

106人浏览过

如何通过点击的 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();
    });
});

登录后复制

代码解释

Flawless AI

好莱坞2.0，电影制作领域的生成式AI工具

查看详情

事件委托： 使用 $(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的详细内容，更多请关注php中文网其它相关文章！