How to duplicate a div by clicking on another

Asked

Viewed 2,936 times

1

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.

jquery

2 answers

2

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/

1

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.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.