Vamos la.
var copia;
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 class="itens">';
html += '<div id="radios"><input type="radio" disabled style="vertical-align: text-bottom;" value="teste" name="data"><input type="text" value="" class="form-control radio-alinha text" placeholder="Adicionar Alternativa"><a href="#" class="del"><span class= "glyphicon glyphicon-trash"></span></a></div></div>';
//html += '<input type="text" placeholder="Nova Entrada">';
//html += '<a href="#" class="del"><span class= "glyphicon glyphicon-trash"></span></a></div>';
$('#campos').append(html); // Adiciona o novo input dentro da div radios
loadEditLabel(); // Carrega o radio para a edição
$(function(){
$('.del').click(function(event){
event.preventDefault();
$(this).parent().remove();
});
});
});
$('#btnexp').on('click', function(){
copia = $('#exp').html();
});
$('#btnexibir').on('click', function(){
$('.copiada').html(copia);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-group esconder" id="id_TME">
<div class="panel panel-default" id='exp'>
<div class="panel-body">
<div id="multipla-escolha">
</div>
<div id="campos"></div>
<button id="add" class="btn btn-primary btn-md">
<span class="glyphicon glyphicon-plus" aria-hidden="true">
</span>
</button>
</div>
</div>
<button ng-click="adicionaTarefa()" type="button" class="btn btn-primary btn-md" data-dismiss="modal" id="btn-cadastra-tarefa"><span class="glyphicon glyphicon-ok-sign"></span> Salvar</button>
</div>
<div id='btnexp'>Copiar</div>
<div id='btnexibir'>Exibir Copia</div>
<div class='copiada'></div>
<script src="bootstrap/js/bootstrap.min.js"></script>
O que foi feito
Criei uma variável global chamada copia
que irá receber todo o conteúdo da div de class panel panel-default
, criei uma id='exp'
para ela.
o evento .html() do jquery recebe TODO o conteúdo da div selecionada.
aplicamos todos esse conteúdo a variável copia
. E posteriormente atribuímos o conteúdo dessa variável a uma outra div, para que a cópia seja realizada.
Para visualizar o funcionamento faça o que quiser com os inputs, depois clique em copiar e depois em exibir copia.
Lembrando que estou mostrando como fazer para replicar o conteúdo exato da div. Você terá que adaptar para o seu próprio código.