Stack Overflow em Português Asked by Sr. André Baill on November 30, 2021
Tenho o seguinte script:
$("#tp_pagamento").change(function(){
var tp_pagamento = $(this).val();
$.ajax({
url: BASE_URL + "ajax/lista_integrador",
type: "POST",
data: {tp_pagamento:tp_pagamento},
success: function(data){
$('.tp_integradora').html("<select id="tp_integradora" name="tp_integradora" class="form-control"><option value='0'>Carregando...</option></select>");
setTimeout(function(){
$('.tp_integradora').html(data);
},1000);
}
});
});
$("#tp_integradora").change(function(){
var tp_integradora = $(this).val();
alert(tp_integradora);
if(tp_integradora==1){
$("#logo_integradora").html("<img src="+ BASE_URL + "/assets/images/integradora-cielo.jpg>");
}
});
Minha ideia é que: Ao selecionar o tp_pagamento, busque os disponíveis e liste em outro select, e isto ele faz, porém, preciso que ao selecionar o próximo select, ele não tem ação nenhuma… Como eu consigo buscar os dados do select que foi apresentado na tela?
Isso está acontecendo porque você está fazendo o evento click em um elemento que está sendo criado dinamicamente, alguém com um melhor conhecimento de DOM pode explicar melhor o motivo disso, porém já obtive esse problema. Recomendo que você dê uma olhada no método on() do jquery. Para resolver esse elemento, basta pegar um elemento mãe que está no html e não foi criado dinamicamente usando on desse jeito: $(elementoMae).on('evento','#elementoCriadoDinamicamente',function(){})
no seu caso tente: $('#logo_integradora').on('click','#tp_integradora',function(){ codigo aqui });
Exemplo:
$("#primeiroSelect").change(function(){
let valor = $(this).val();
$("#mae").append(criaSelect)
})
$("#mae").on("change","#segundoSelect",function(){
let valor = $(this).val();
console.log("Valor Escolhido foi: "+valor);
})
function criaSelect(){
let html = '<select id="segundoSelect" class="form-control"> <option value="4"> 4 </option> <option value="5"> 5 </option> <option value="6"> 6 </option> </select>';
return html;
}
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
#segundoSelect{
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<div id="mae" class="container">
<select id="primeiroSelect" class="form-control">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
</select>
</div>
Answered by Reynnan Viktor on November 30, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP