2

Estou tendo dificuldade para manipular componentes radiobuttons criados dinamicamente ao clicar no botão, porem, está apresentando um pequeno problema, quando vou clicar no radiobutton gerado, o componente selecionado é o principal que está contido na table que utilizo com estes componentes.

      // Initialize select input materialize
      $(document).ready(function() {
         
          // Add row in table
          var i=1;
          $("#btAddRow").click(function(){
            $('#addr'+i).html("#'"+(i+1)+"' <div class='row'><div class='input-field col s7'><input type='text' name='item_pergunta["+i+"]' id='item_pergunta'><label for='item_pergunta'>Descri&ccedil;&atilde;o do Item</label> </div><div class='input-field col s5'><label>Correta?</label><p style='display:inline; margin-left: 50px'><input class='with-gap' name='group["+i+"]' type='radio' id='rb1'  /><label for='rb1'>Sim</label><input class='with-gap' name='group1["+i+"]' type='radio' id='rb2'  /><label for='rb2'>N&atilde;o</label></p></div></div></div></div>");
      
            $('#tbItQst').append('<tr id="addr'+(i+1)+'"></tr>');
            i++; 
          });
          
          $("#btDelRow").click(function(){
          	   if (i>1) {
      		        $("#addr"+(i-1)).html('');
      		        i--;
      		     }
	        });
  
      });   
      
             
 
 <table id="tbItQst">                    
    <tr id='addr0'>
                      
                     
       <div class="row">
         <div class="input-field col s7">                                                      			                        	  
           <input type="text" name="item_pergunta" id="item_pergunta">
           <label for="item_pergunta">Descri&ccedil;&atilde;o do Item</label>                                                                      </div>
                          
         <div class="input-field col s5">
           <label>Correta?</label>
                         
           <p style="display:inline; margin-left: 50px">
              <input class="with-gap" name="group1" type="radio" id="rb1"  />
              <label for="rb1">Sim</label>
                              
             <input class="with-gap" name="group1" type="radio" id="rb2"  />
             <label for="rb2">N&atilde;o</label>
           </p>                            
       </div>                     
    </div>                                                             
                     
                     
      <tr id='addr1'></tr>
                     
 </table>
 
  <div class="col s10">                           
       <button type="button" id="btAddRow" class="waves-effect waves-light btn green">
           <i class="material-icons left">add</i> adicionar item
       </button>
       <button type="button" id="btDelRow" class="waves-effect waves-light btn grey">
             <i class="material-icons left">cancel</i> eliminar item
       </button>
</div>    

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

1
  • Não compreendi muito bem a sua dúvida...
    – LocalHost
    3/04/2017 às 0:23

1 Resposta 1

0

Altera esta linha para:

$('#addr'+i).html("#'"+(i+1)+"' <div class='row'><div class='input-field col s7'><input type='text' name='item_pergunta["+i+"]' id='item_pergunta'><label for='item_pergunta'>Descri&ccedil;&atilde;o do Item</label> </div><div class='input-field col s5'><label>Correta?</label><p style='display:inline; margin-left: 50px'><input class='with-gap' name='group"+i+"' type='radio' id='rb1'  /><label for='rb1'>Sim</label><input class='with-gap' name='group"+i+"' type='radio' id='rb2'  /><label for='rb2'>N&atilde;o</label></p></div></div></div></div>");

já Agora devias Organizar teu codigo usando o jquery exemplo

var div = $("<div></div>, {"name":"div","id":"12345",[..]});

depois usas

$('#div1).append(div);

nas minhas expriencias anteriores o código fica mais limpo! espero ter ajudado!

fiddle a funcionar: https://jsfiddle.net/yj2ewrdv/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .