如何使用 jQuery 获取动态生成 div 中点击元素的正确 ID-html教程-PHP中文网

如何使用 jQuery 获取动态生成 div 中点击元素的正确 ID

聖光之護

发布： 2025-11-20 11:47:02

原创

660人浏览过

如何使用 jquery 获取动态生成 div 中点击元素的正确 id

本文旨在解决在使用 jQuery 动态生成包含隐藏 input 元素的 div 时，点击不同 div 获取到相同 ID 的问题。通过事件委托和查找父元素的方式，确保每次点击都能准确获取到对应 div 中 input 元素的正确值。

在使用 jQuery 动态生成 HTML 元素时，尤其是涉及到事件处理和数据获取，很容易遇到一些问题。本文将详细介绍如何在使用 jQuery 动态生成包含隐藏 input 元素的 div 列表时，正确获取到被点击 div 对应的 ID 值。

问题描述

假设你有一个动态生成的用户列表，每个用户都包含一个隐藏的 input 元素，用于存储用户的 ID。当点击某个用户时，你需要获取该用户的 ID。然而，由于所有动态生成的 input 元素都具有相同的 name 属性，直接使用 $("input[name='id_utt']").val() 获取到的总是第一个 input 元素的值，而不是当前点击的那个。

解决方案：事件委托和查找父元素

解决这个问题的关键在于使用事件委托和查找父元素的方式。

事件委托: 将事件监听器绑定到父元素上，而不是直接绑定到动态生成的子元素上。这样可以确保即使子元素是动态生成的，事件监听器也能正常工作。

OmniAudio
OmniAudio 是一款通过 AI 支持将网页、Word 文档、Gmail 内容、文本片段、视频音频文件都转换为音频播客，并生成可在常见 Podcast ap

111

查看详情
查找父元素: 在事件处理函数中，通过 $(this) 获取到当前点击的元素，然后使用 .closest() 方法找到包含 input 元素的最近的父元素。这样就可以在该父元素范围内查找 input 元素，从而获取到正确的 ID 值.

代码示例

以下是修改后的代码示例：

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();
    });
});

登录后复制

代码解释:

$(document).on('click', '.histor-uten', function(e){ ... });: 这行代码使用了事件委托，将 click 事件监听器绑定到了 document 对象上，并指定了只有点击 class 为 .histor-uten 的元素时才会触发该事件。
let parent = $(this);: 获取当前点击的元素，并赋值给 parent 变量。
if(!parent.hasClass('histor-uten')){parent = $(this).closest('.histor-uten');}: 确保选择器选择的是具有 histor-uten 类的元素。
var id_utt = $(parent.find("input[name='id_utt']")).val();: 这行代码首先使用 $(this).closest('.histor-uten') 找到包含 input 元素的最近的父元素（class 为 .histor-uten 的 div），然后在该父元素范围内使用 find("input[name='id_utt']") 查找 input 元素，最后使用 .val() 方法获取其值。

HTML 结构

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a class="__cf_email__" data-cfemail="e5878a8a919691978495a5d0cbb4cbb6" 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="93f1fcfcf7f0f7f1e2f3d3a6bdd2bdc0" 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>

登录后复制