Next, I will have to add radiobuttons dynamically, in that they will have to be able to write. They come as label ne? I needed to be able to edit this label, it could be a text too, the important thing is to be able to add the radiobutton and the user can write what they want in the label
ThankyouforansweringJunior,justaquestion.Myhtmllookslikethis:
<divclass="form-group esconder" id="id_2">
<div class="panel panel-default">
<div class="panel-body">
<div id="multipla-escolha">
<label class="" for="orderBy">Pergunta</label>
<input class="form-control " type="text" placeholder="Pergunta">
<div class="container">
<div id="radios">
<div>
<input type="radio" value="teste" name="data">
</div>
</div>
<button id="add">+</button>
</div>
</div>
</div>
</div>
</div>
When rendering it already brings 2 radios, and when I click on anything, it adds more radios, do you know what it can be?
function loadEditLabel() {
// Salva o novo input saindo do campo ou apertando enter
$('[contenteditable="true"]').focus().select().keydown(function(event) {
if(event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
$(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
$(this).prop('contenteditable', false); // Desabilita o campo de edição
}
})
.blur(function() {
$(this).prev('input').val(this.innerHTML);
$(this).prop('contenteditable', false);
});
}
$('#add').click(function() {
html = '<div>';
html += '<input type="radio" value="" name="data">';
html += '<label contenteditable="true"></label>';
html += '</div>';
$('#radios').append(html); // Adiciona o novo input dentro da div radios
loadEditLabel(); // Carrega o radio para a edição
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="radios">
<div>
<input type="radio" value="teste" name="data">
<label>Teste</label>
</div>
<div>
<input type="radio" value="teste2" name="data">
<label>Teste2</label>
</div>
</div>
<button id="add">+</button>I'm going to add a print, because simulating jsfiddle does not make the same mistake. Just to understand, he 's getting all the clicks before he even gets on the screen, and he' s adding the radio 's. https://i.stack.imgur.com/ftHvk.png ">
function loadEditLabel() {
// Salva o novo input saindo do campo ou apertando enter
$('[contenteditable="true"]').focus().select().keydown(function(event) {
if (event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
$(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
$(this).prop('contenteditable', false); // Desabilita o campo de edição
}
})
.blur(function() {
$(this).prev('input').val(this.innerHTML);
$(this).prop('contenteditable', false);
});
}
$('#add').click(function() {
html = '<div>';
html += '<input type="radio" style="vertical-align: text-bottom;" value="teste" name="data">';
html += '<input type="text" placeholder="Nova Entrada">';
html += '</div>';
$('#radios').append(html); // Adiciona o novo input dentro da div radios
loadEditLabel(); // Carrega o radio para a edição
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="radios">
<div>
<input type="radio" style="vertical-align: text-bottom;" value="teste" name="data"><input type="text" value="Opção 1">
</div>
</div>
<button id="add">+</button>