Elements inserted via . html() and jQuery key action

Question

The idea of the code is to search for products and insert the product link when the user selects the registration link as a linked product. By clicking on input[type='radio'], a new field is inserted below the URL field through the . html() of jQuery.

I entered a log return in the console to see if the code was recognizing the . keyup() event from the field, but no answers.

$(document).ready(function(){

  $("input.tipoURL").on('click',function() {
  
    var value = $(this).val();
    
    if(value=='prod') {
    
      $('#prURL').val('');
      $('#return').html("<input type='text' name='listaProd' id='listaProd' placeholder='Pesquise pelo produto'/><div id='returnProd'></div>");
      
    } else if(value='link') {
    
      $("#prURL").val('');
      $("#return").html('');
      
    }
    
  });
  
  $('#listaProd').keyup(function(e){
  
    e.preventDefault();
    var value = $(this).val();
    var contaChar = value.length;
    
    window.alert('Acessou');
    
    if(contaChar<=3) {
      $('#returnProd').html('');
    }
    
    if(contaChar>3) {
      $("#returnProd").load("lista.php?prod=" + value,function(data){
        console.log(data);
      });
    }
    
  });
  
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type='text' name='prURL' id='prURL'/>

<label for='tipoURLlink'><input id='tipoURLlink' type='radio' name='tipoURL' value='link' id='tipoURL' class='tipoURL' checked/> Link</label>

<label for='tipoURLprod'><input id='tipoURLprod' type='radio' name='tipoURL' value='prod' class="tipoURL"/> Produto</label>

<div id='return'></div>

Answer 1

How you are entering an element in the DOM dynamically, and the association of the event keyup was done before the element exists, it is not executed.

Change the line:

$('#listaProd').keyup(function(e){

For:

$(document).on('keyup', '#listaProd', function(e){

This way you can intercept any event keyup within the document containing the id #listaProd.

$(document).ready(function(){

  $("input.tipoURL").on('click',function() {
  
    var value = $(this).val();
    
    if(value=='prod') {
    
      $('#prURL').val('');
      $('#return').html("<input type='text' name='listaProd' id='listaProd' placeholder='Pesquise pelo produto'/><div id='returnProd'></div>");
      
    } else if(value='link') {
    
      $("#prURL").val('');
      $("#return").html('');
      
    }
    
  });
  
  $(document).on('keyup', '#listaProd', function(e){
  
    e.preventDefault();
    var value = $(this).val();
    var contaChar = value.length;
    
    window.alert('Acessou');
    
    if(contaChar<=3) {
      $('#returnProd').html('');
    }
    
    if(contaChar>3) {
      $("#returnProd").load("lista.php?prod=" + value,function(data){
        console.log(data);
      });
    }
    
  });
  
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type='text' name='prURL' id='prURL'/>

<label for='tipoURLlink'><input id='tipoURLlink' type='radio' name='tipoURL' value='link' id='tipoURL' class='tipoURL' checked/> Link</label>

<label for='tipoURLprod'><input id='tipoURLprod' type='radio' name='tipoURL' value='prod' class="tipoURL"/> Produto</label>

<div id='return'></div>