How to duplicate a div by clicking on another

Question

How to duplicate a div by clicking on another

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I have a div called contatoFormIncluir , inside it I have another div called contatoBtMais , I want to do the following; When I click on contatoBtMais it duplicates the contatoFormIncluir div. How?

My HTML looks like this:

<div class="contatoFormIncluir">
    <div class="contatoFormInteiro">
        <div class="contatoBGCinza">
            <div class="clear"></div>
            <div class="cadastroLinha">
                <div class="cadastroTituloItem">Curso:</div>
                <input id="cursoCursoForm" name="cursoCursoForm" type="text" class="cadastroItemInput" />
            </div>
            <div class="clear"></div>
            <div class="cadastroLinha">
                <div class="cadastroTituloItem">Entidade:</div>
                <input id="entidadeForm" name="entidadeForm" type="text" class="cadastroItemInput" />
            </div>
            <div class="clear"></div>
            <div class="cadastroLinha">
                <div class="cadastroTituloItem">Carga hor&aacute;ria:</div>
                <input id="cargaForm" name="cargaForm" type="text" class="cadastroItemInput" />
            </div>
            <div class="clear"></div>
            <div class="cadastroLinha">
                <div class="cadastroTituloItem">Obs:</div>
                <input id="obsForm" name="obsForm" type="text" class="cadastroItemInput" />
            </div>
        </div>
        <div class="contatoBtMais"></div>
    </div>
</div>

Jquery looks like this:

$( "contatoBtMais" ).click(function() {
    $(".contatoFormIncluir").append();
});

Yes, Jquery is wrong, I do not know how to proceed.

jquery

asked by anonymous 25.07.2014 / 18:53

2 answers

How to implement the verifyDeveloperPayload method? AVD Android 4.0+ Does not start

score 2 · Answer 1

As explained by Paulo Roberto in this question , you can use the jQuery.clone function. Just navigate the elements correctly:

$('.contatoBtMais').click(function(e){
    var f = $(this).parent().parent(),
        c = f.clone(true,true);
    c.insertAfter(f);
});

Above, the f variable is .contatoFormIncluir of the .contatoBtMais that was clicked, the c variable is a .contatoFormIncluir clone copying including Javascript events.

Example: link

score 1 · Answer 2

I leave one more answer because I think using .closest() is safer than using n times .parent() , because in case the element clicked is "deep" descend of the element that is wanted copy, the code will look like $(this).parent().parent().parent().parent()... etc and this is not good.

So my suggestion for the question is:

$( ".contatoBtMais" ).click(function() {
    var original = $(this).closest(".contatoFormIncluir");
    var copia = original.clone(true, true);
    original.after(copia); // ver (*) em baixo
});

Note:

The .clone () method accepts 2 arguments. The first one says "yes or no" to copy event handlers; the second does or does not copy the descendants as well. Here you may want to have false, true but as I was not sure how to use the code I left true, true .
(*) this last line adds the new copia to the original element. I'm not sure that's where you want the copy, but it's an example. More info about .after here .