How to duplicate a div by clicking on another

Question

I have a div call contatoFormIncluir, inside her I have another div called contatoBtMais, I want to do the following; when I click on contatoBtMais he duplicates the div contatoFormIncluir. Has as?

My HTML is 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 is like this:

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

Yes, Jquery is wrong, I don’t know how to proceed.

Answer 1

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

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

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

Example: http://jsfiddle.net/MDL48/

Answer 2

I leave one more answer because I think to use .closest() is safer than using n times .parent(), because in case the clicked element is "deep" descending of the element you want to copy, the code will appear $(this).parent().parent().parent().parent()... etc and this is not good.

So my suggestion to 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 method .clone() accepts 2 arguments. The first says "yes or no" to copy the Vent handlers; the second does or does not copy the descendants as well. Here you might want to have false, true but since I wasn’t sure how to use the code I left true, true.

• (*) this last line adds the new copia after the element original. I’m not sure that’s where you want the copy, but it’s an example. More info on .after here.