Div cloned (jquery) elements only work on the original div

Question

Div cloned (jquery) elements only work on the original div

Navigation

#1 by (3 votes)

3

I'm using the "cloning" of divs in jquery, and inside of them I have other divs that when clicking on a button eg: DIV 1, DIV 2, DIV 3 with javascript shows the contents of each div. But when I add the new div (cloned) when I click the button to show the hidden div inside the cloned the change appears in the original div only, and the cloned one stays the same ..

When using the "CLONAR" command of Jquery in the div "engloba" only the show / hide works in the original, not the cloned.

FOLLOW BELOW:

<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>

javascript jquery

asked by anonymous 04.11.2016 / 01:09

1 answer

git log command for all commits of a specific file How to get data from the previous row in SQL?

score 3 · Accepted Answer

In HTML you can not have more than one element with duplicate ID. The .getElementById() looks for a single element, and when you have multiple elements with the same ID the thing stops working as expected.

In addition there is a suggestion of simplifying code. So you can add N rows and display = 'block' or display = 'none' need not be so long and too adapted.

Notice that I've made changes to HTML and JavaScript

function Listagem(index, el) {
    var divs = el.parentElement.querySelectorAll('div');
    for (var i = 0, l = divs.length; i < l; i++) {
        divs[i].style.display = i == index ? 'block' : 'none';
    }
}
$(document).ready(function() {
    var linha = $(".engloba:first").clone();
    $("#mais").click(function() {
        $("#conteudo_engloba").append(linha.clone());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--botaoque"clona" a div (engloba)  -->
<form>
    <input type="button" name="" value="+" id="mais">
</form>

<div id="conteudo_engloba">
    <div class="engloba">
        <a onClick="Listagem(0, this);">DIV1</a>
        <a onClick="Listagem(1, this);">DIV2</a>
        <a onClick="Listagem(2, this);">DIV3</a>

        <div>DIV 1</div>
        <div>DIV 2</div>
        <div>DIV 3</div>
    </div>
</div>

Div cloned (jquery) elements only work on the original div

1 answer

jsFiddle: link