Take specific position in . each

Question

I made a noose .each that returns some button:

$(document).ready(function(){
            listarPedidos()
            var consultas = setInterval(listarPedidos, 4000);

        });
        function listarPedidos(){
            $.getJSON('conectar/_pedidos/listaPedidos.php', function (data) {  
                $.each(data, function(i, valor){
                  elementoFILA += "<tr id='statusFILA'>";
                    elementoFILA += "<td>" + valor.PED_ID + "</td>";
                    elementoFILA += "<td>" + valor.PED_DATA_N + "</td>";
                    elementoFILA += "<td>" + resultado + " / " + valor.CLI_TEL + "</td>";
                    elementoFILA += "<button class='btn btn-info' id='btnVisu' title='Visualizar Pedido'><i class='fas fa-eye'></i> </button>";
                    elementoFILA += "<button class='btn btn-primary' title='Editar Pedido'><i class='fa fa-pencil-alt'></i> </button>";
                    elementoFILA += "<button class='btn btn-dark' disabled='' title='Setar Saiu Entrega'><i class='fa fa-motorcycle'></i> </button>";
                    elementoFILA += "<button class='btn btn-dark' id='btnFinalizar' disabled='' title='Finalizar Pedido'><i class='fa fa-check'></i> </button>";
                    elementoFILA += '</div></td>'
                 elementoFILA += "</tr>";
  }

My difficulty is picking up line id='btnVisu'.

I’m trying to do it this way, but not the right way:

$('#btnVisu').click(function () {
   alert("clicou");
});

I know you have to pick up the accountant’s .each but I couldn’t do.

Answer 1

Your problem is you’re generating duplicate Ids. HTML Ids must be unique, so when you use the selector you will only receive the first element with that ID.

You have at least 3 solutions:

• use classes
• use unique Ids
• create an element within the .each directly

---

Using classes:

At times id='btnVisu' uses <button class='btn btn-info btnVisu' and then $('.btnVisu').click( on the event headphone.

Using Unique Ids:

Usa id='btnVisu" + i + "' (incrementing with the position number inside the array) and then using this ID in `.click()``

Creating elements within the .each

Avoid all duplicate Ids. In this case the code could be like this:

function visualizar() {
  console.log(this);
}

$.each(data, function(i, valor) {
  let elementoFILA = '';
  elementoFILA += "<td>" + valor.PED_ID + "</td>";
  elementoFILA += "<td>" + valor.PED_DATA_N + "</td>";
  elementoFILA += "<td>" + resultado + " / " + valor.CLI_TEL + "</td>";
  elementoFILA += "<button class='btn btn-info' title='Visualizar Pedido'><i class='fas fa-eye'></i> </button>";
  elementoFILA += "<button class='btn btn-primary' title='Editar Pedido'><i class='fa fa-pencil-alt'></i> </button>";
  elementoFILA += "<button class='btn btn-dark' disabled='' title='Setar Saiu Entrega'><i class='fa fa-motorcycle'></i> </button>";
  elementoFILA += "<button class='btn btn-dark btnFinalizar' disabled='' title='Finalizar Pedido'><i class='fa fa-check'></i> </button>";
  elementoFILA += '</td>'
  const $tr = $('<tr />');
  $tr.appendTo('table'); // ou outro seletor/elemento
  $tr.html(elementoFILA);
  $tr.find('.btn-info').click(visualizar);
});

Note: in your HTML you have elementoFILA += '</div></td>'. I don’t see where that <div> begins. Has it been forgotten?