点击动态生成的用户卡片无法获取对应codigo问题求助

问题原因 #

你当前的点击事件代码中，$("input[name='id_utt']").val()是全局查找所有name='id_utt'的input元素，只会返回页面中第一个匹配元素的value，所以无论点击哪个卡片，都会拿到第一个用户的codigo。

解决方案 #

点击卡片时，基于当前点击的元素（$(this)），在其内部查找对应的隐藏input，这样就能获取当前点击卡片的codigo。同时修复代码中的其他小问题：

• 循环中未声明的变量添加let声明，避免全局污染
• 修正$("btn-show")的选择器，添加类选择器的.前缀

修改后的完整代码 #

JavaScript 代码

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 (let i = 0; i < data.length; i++) {
    let codigo = data[i].codigo;
    let 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){
  e.preventDefault(); // 阻止a标签默认跳转行为
  // 基于当前点击的a标签，查找内部的隐藏input
  var id_utt = $(this).find("input[name='id_utt']").val();
  console.log(id_utt);
});

$(function() {
    $(".btn-show").click(function(e) { // 修正选择器，添加.前缀
      e.preventDefault();
      let el = $(this).data('element');
      $(el).show();
      $("section > div").not(el).hide();
    });
});

HTML 代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/bootstrap@5.1.3/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>

关键修改点 #

1. 点击事件中的input查找：将$("input[name='id_utt']").val()改为$(this).find("input[name='id_utt']").val()，确保只获取当前点击卡片内的input值
2. 添加e.preventDefault()：阻止a标签的默认跳转行为，避免页面跳转影响操作
3. 变量声明：循环内的codigo和Utente添加let声明，避免全局变量污染
4. 选择器修正：将$("btn-show")改为$(".btn-show")，正确匹配类选择器

内容的提问来源于stack exchange，提问作者Bruno