How to find an HTML component in the DOM after using the . append() function?

Question

I’m making a request to my server with $.get of Jquery, and populating my table with the method below :

$.get(/*[[@{/empregados/salariosMinimos.json}]]*/ 'consultaEstadoSalario',         {uf : uf,data : data})
        .done(function(salarioestado){
                $("#tabela-salario-estado tbody tr").remove();
                for(var i in salarioestado){
                    if(salarioestado[i].dataFim == null){
                        salarioestado[i].dataFim = "";
                    }
                    var linhaTabela = $("<tr><td> " + formateDateJson(salarioestado[i].dataInicio) + "  </td> <td> " + formateDateJson(salarioestado[i].dataFim) +" </td><td class='text-right'> " + currencyFormat(salarioestado[i].valor)+" </td> " + "<td ><button id='btnSelecionar' class='btnSelecionar pull-right btn btn-xs btn-primary' type='submit' title='selecionar'><span class='glyphicon glyphicon-ok'></span></button></td>" + "</tr>");
                    $("#tabela-salario-estado").append(linhaTabela);

                }
        });

The problem is that when I run the function .append() he create there my vision straight but the button which I place in the append with id='btnSelecionar' is not recognized in my DOM, I do not find this id on the page and can not do any js event with this button. So what would be the solution for him to recognize my button ?

Answer 1

Since you didn’t put where you’re creating the button click event I’ll assume what I think is the problem.

The problem is this.

You are probably creating the button click event using either your ID or your CLASS. But if you do this it will only create this click event for elements that are already present on your page when. click() was called.

As you are creating elements dynamically it does not work. To work you must create a Listener (or delegated Event Handler) to your buttons.

Here is an example:

$('#pagina_onde_esta_meu_botao').on('click', '.btnSelecionar ', function(){
    console.log(this.value);
});

With this you have created an event in your page where your button will be created. this event is listened to (Listener) every click of any element that has the class btnSeteach even though it is created after every GIFT has been loaded.

OBS IMPORTANTE

ID’s are identifiers within a set (group) of elements. It is not a good practice to create N buttons with the same ID. I advise you to put either an identifier that makes sense for your application or concatenate with the index of the for.

... id='btnSelecionar'" + i + " ...

For example.