2

Olá. Estou me batendo para criar um botão para cada resultado que o $.each gera.

 $.each (data, function(index, orc){
           $html += '<div>';
           $html += '<button type="button" class="list-group-item" id="btn_orc'+orc.numero+'">Número: ' +orc.numero+'</br>Data: '+orc.data+'</br>Validade: '+orc.validade+'</br>Total: R$'+orc.total+'</br>'+'</button>';
           $html += '</div>';
    });
    $('#lista').html($html);
   // aqui não sei como implementar
   $('#btn_orc').on('click', function(){
        window.alert("clicou");});

Alguém poderia me dar uma força?

7
  • Ao invés de usar $("#lista").html($html);, use o método "append", ficando assim $("#lista").append($html);, pois da forma que está fazendo, toda vez ele está substituindo o último html adicionado. Commented 22/11/2016 às 14:04
  • Vlw. Vou fazer a alteração.
    – MarcelP
    Commented 22/11/2016 às 14:09
  • Se der certo, me avise para marcar como resposta. Veja mais informações aqui, caso precise: W3Schools - jQuery DOM Add. Commented 22/11/2016 às 14:10
  • Seu código funciona: jsfiddle.net/6osc71sv Qual exatamente o problema que está tendo?
    – BrTkCa
    Commented 22/11/2016 às 14:17
  • Não consigo criar um id para o botão que gera com cada resultado. Diferencio o id do botão, id="btn_orc'+orc.numero+'", mas não consigo usa-lo.
    – MarcelP
    Commented 22/11/2016 às 14:23

1 Resposta 1

2

Podes usar um seletor que deteta todos os IDs que começam por uma dada string assim:

$('[id^="btn_orc"]').on('click', function() {
   alert("clicou");
});

Ou então podes delegar o evento assim:

$('#lista').on('click', 'button', function() {
   alert("clicou");
});

Ambos fazem o que queres e o this dentro da callback é o botão clicado. A primeira solução funciona se os elementos já estiverem na página, o que fazes na linha anterior com $('#lista').html($html);, a segunda solução funciona desde que #lista exista.

5
  • Deu certo aqui, Sergio. Muito obrigado.
    – MarcelP
    Commented 22/11/2016 às 15:54
  • O segundo argumento da segunda solução delega o evento click em botões dentro de #lista @Sergio? Seria equivalente à $('#lista > button')? Ou tem uma finalidade diferente caso o dom tenha sido manipulado via código..
    – BrTkCa
    Commented 22/11/2016 às 16:00
  • 1
    @LucasCosta sim e não, nesse segundo caso ele permite cliques em botões que sejam adicionados depois desse código ter corrido. Sendo que $('#lista > button') é só para elementos button descendentes diretos de #lista que existam na página quando esse código corre.
    – Sergio
    Commented 22/11/2016 às 16:03
  • @Sergio te devo uma cerveja, cara. Vlw mesmo ^^
    – MarcelP
    Commented 22/11/2016 às 18:53
  • @MarcelP aha, eu não bebo cerveja :) mas fico contente por ter ajudado!
    – Sergio
    Commented 22/11/2016 às 18:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .