It happens that I load some buttons by means of the append method of jquery, this in the success of an ajax call to the server to obtain some values that I will put in the id each button as well as in its value. When the page loads, it shows all the buttons but when I try to enter the attribute by means of $('#id-valor').attr('value'); and / or $('#id-valor').val() it shows me undefined to what is due?
The code of my javascript is the following:
$('select#estado option:selected').each(function(){
$.ajax({
url: 'http://localhost:8000/mis-solicitudes/filtrar-estado',
data: {id_usuario: $('#id_oculto').val(), estado: $(this).html()},
type: 'GET',
//dataType:'json',
success: function(response){
if(response.length>0){
for(var i = 0; i<response.length; i++){
$('#cuerpo-tabla').append("<tr id='tr-"+i+"'>"+"<th>"+parseInt(i)+parseInt(1)+"</th>"+"<td>"+response[i][1]+"</td>"+
"<td><button type='button' id='btn-editar"+parseInt(i+1)+"' value='"+response[i][0]+"' class='btn btn-outline-primary' data-toggle='modal' data-target='#exampleModal' data-whatever='@mdo'>Editar</button></td>"+
"<th scope='row'><button id='btn-pausar' type=button' class='btn btn-outline-warning'>Pausar</button></th>"+
"<td><button type='button' class='btn btn-outline-danger'>Anular</button></td>"+
"<td><button type='button' class='btn btn-outline-info'>Visualizar</button></td>"+
"<td><button type='button' class='btn btn-outline-dark'>Archivar</button></td></tr>");
}
}
else{
$('tbody tr').remove();
}
},
error: function(xhr, status, error){
console.log('Disculpe, ocurrió un problema '+ error)
},
complete: function(xhr, status){
console.log('Petición realizada')
}
});
});
}).change();
I want to add that every time I put in the browser to inspect the section where those buttons are added, I can visualize them. But when I see source code they do not appear.