Select change jQuery

Question

Select change jQuery

Navigation

#1 by (1 votes)

0

I have the following 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>");
    }
});

My idea is that: When selecting tp_payment, look for the available ones and list them in another select, and this does, however, I need to select the next select, it has no action ... How can I get the data from the select that was displayed on the screen?

jquery

asked by anonymous 09.07.2017 / 17:37

1 answer

Error reading if file. arff exists or not Can not convert JSON List to Array in Javascript

score 1 · Accepted Answer

This is happening because you are doing the event clicking on an element that is being created dynamically, someone with a better knowledge of DOM can better explain the reason for this, but I already got this problem I recommend you take a look at the on method ) of jquery. To solve this element, just pick up a parent element that is in html and it was not created dynamically using on this way $ (elementMae) .on ('event', '#DriamCreated element', function () {})

In your case try: $('#logo_integradora').on('click','#tp_integradora',function(){ codigo aqui });

Example:

$("#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><scriptsrc="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>