Estou utilizando a "clonagem" de divs em jquery, e dentro delas tenho outras divs que ao clicar em um botão ex.: DIV 1, DIV 2, DIV 3 com javascript mostra o conteúdo de cada div. Só que ao adicionar a nova div(clonada) quando clicar no botão para mostrar a div ocultada dentro da clonada aparece a mudança somente na div original, e na clonada fica igual..
Ao utilizar o comando "CLONAR" do Jquery na div "engloba" só funciona o mostrar/ocultar na original e não na clonada.
SEGUE ABAIXO:
<script>
function Listagem(tr) {
if (tr == 1) {
document.getElementById('div1').style.display="block";
document.getElementById('div2').style.display="none";
document.getElementById('div3').style.display="none";
}else if (tr == 2) {
document.getElementById('div1').style.display="none";
document.getElementById('div2').style.display="block";
document.getElementById('div3').style.display="none";
}
else if (tr == 3) {
document.getElementById('div1').style.display="none";
document.getElementById('div2').style.display="none";
document.getElementById('div3').style.display="block";
}
</script>
<!-- Clona DIVS em jquery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
$("#mais").click(function() {
linha = $("#engloba").html();
$("#conteudo_engloba").append("<br />"+linha+"<br />");
});
});
</script>
<!-- botao que "clona" a div (engloba) -->
<form>
<input type="button" name="" value="+" id="mais">
</form>
<div id="conteudo_engloba">
<div id="engloba">
<a onClick="Listagem(1);" id="btDetalhes" >DIV1</a>
<a onClick="Listagem(2);" id="btDetalhes" >DIV2</a>
<a onClick="Listagem(3);" id="btDetalhes" >DIV3</a>
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
</div>
</div>
html
ejs