Dynamic button creation

Question

Dynamic button creation

Asked 7 years, 10 months ago

Viewed 42 times

2

Hello. I’m hitting myself to create a button for every result that the $.each generates.

 $.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");});

Someone could give me a boost?

Instead of using $("#lista").html($html);, use the "append" method, thus $("#lista").append($html);, because the way you’re doing, every time he’s replacing the last html added.

– Douglas Garrido

2016/11/22 at 14:04
Vlw. I will make the change.

– MarcelP

2016/11/22 at 14:09
If it works, let me know to mark it as a response. See more information here if you need: W3schools - jQuery DOM Add.

– Douglas Garrido

2016/11/22 at 14:10
Your code works: https://jsfiddle.net/6osc71sv/ What exactly is the problem you are experiencing?

– BrTkCa

2016/11/22 at 14:17
I cannot create an id for the button it generates with each result. I can’t tell the id of the button, id="btn_orc'+Orc.numero+'", but I can’t use it.

– MarcelP

2016/11/22 at 14:23
It is generating correctly, can edit your question by placing the code snippet that is trying to use it?

– BrTkCa

2016/11/22 at 14:25
put there ;).

– MarcelP

2016/11/22 at 14:30

Show 2 more comments

1 answer

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.

by Sergio • **133,294** points · Answer 1 · 2016-11-22T15:32:55+00:00

You can use a selector that detects all Ids that start with a given string like this:

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

Or you can delegate the event like this:

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

Both do what you want and the this inside the callback is the button clicked. The first solution works if the elements are already on the page, what you do in the previous line with $('#lista').html($html);, the second solution works provided that #lista exists.