Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá Pessoas, estou clonando uma elemento dom com .clone do jquery, mas o elemento clonando não executa a ação de clonagem, somente o "original" o faz.
HTML
<div id="grupo-estudantes">
<div class="row">
<div class="col m6">
<label>Nome do Estudante</label>
<input id="id_estudante-nome" maxlength="64" name="estudante-nome" type="text" />
</div>
<div class="col m4">
<label>Turma do Estudante</label>
</div>
<div class="col m2">
<a id="clonar-estudante" class="btn-floating btn-large waves-effect waves-light green tooltipped" data-position="right" data-delay="50" data-tooltip="Adicionar Estudante">
<i class="material-icons">group_add</i>
</a>
</div>
</div>
</div>Javascript
(function(){
jQuery("#clonar-estudante").click(function(){
jQuery("#grupo-estudantes .row:first-child").clone().find("input").val("").end().appendTo("#grupo-estudantes");
});
})(jQuery);Obrigado, deu certo.
Nem tinha notado que estava duplicando ID
EDIT:
EDIT 2: Deu uma mudada no código, não sei se alguém viu, mas vou registrar
Dei uma mexida e fiz um plugin simples:
O HTML seria algo do tipo:
div#grupo-responsaveis>div{elemento a ser duplicado}>div.clonar-btn>button.clonar-btn-add+button.clonar-btn-remove
jQuery.fn.cloneDom = function(){
var $group = this;
var $cloneDom = $group.children();
console.log($cloneDom);
$group.delegate(".clonar-btn-add", "click", function(){
$cloneDom.clone().find("input").val("").end().appendTo($group);
});
$group.delegate(".clonar-btn-remove", "click", function(){
jQuery(this).parent().parent().remove();
if($group.children().length <= 0)
{
$cloneDom.clone().find("input").val("").end().appendTo($group);
}
});
};
jQuery("#grupo-responsaveis").cloneDom();
Use event delegate, e não duplique IDs.