Get the correct id according to the div I click-CodePudding

I have the following dynamic code:

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 >
            <a href="#" >
              <div  id="profile-photo-div">
                <div >
                  <div  id="profile-img-input">
                    <label  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(){

  var id_utt = $("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();
    });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.min.js"></script>

<a href="s105" data-element="#minhaDiv105" >Utentes</a>

<section id="s105">
  <div id="minhaDiv105">
    <div >
    </div>
  </div>
</section>

This code generates a div with several users and their respective user code. so far so good.

The problem I'm having comes after this step. After returning the users, when I click for example on the user with the user code number 3, it returns the user code 1.

And the correct one, if I click on the user with the code number 3, it should return the user code number 3 and not the 1.

Can you help?

CodePudding user response：

Here is an example using Event Delegation. You basically check which button it being clicked and get the child input element of its parent instead of the first one available in the document.

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 >
            <a href="#" >
              <div  id="profile-photo-div">
                <div >
                  <div  id="profile-img-input">
                    <label  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();
    });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.min.js"></script>

<a href="s105" data-element="#minhaDiv105" >Utentes</a>

<section id="s105">
  <div id="minhaDiv105">
    <div >
    </div>
  </div>
</section>

CodePudding user response：

You have to access input inside event.target, something like this:

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 >
            <a href="#" >
              <div  id="profile-photo-div">
                <div >
                  <div  id="profile-img-input">
                    <label  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(event){
  var id_utt = $(event.target).find("input[name='id_utt']")[0].value;
  console.log(id_utt);

});

$(function() {
    $(".btn-show").click(function(e) {
      e.preventDefault();
      el = $(this).data('element');
      $(el).show();
      $("section > div").not(el).hide();
    });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.min.js"></script>

<a href="s105" data-element="#minhaDiv105" >Utentes</a>

<section id="s105">
  <div id="minhaDiv105">
    <div >
    </div>
  </div>
</section>