1

Boa tarde, tenho uma função em jquery que venho melhorando desde que a descobri em fóruns, ela serve para criar elementos dinamicamente utilizando jquery

/* função que insere e remove cadeia de inputs */
    var inputnew = 0;
    function new_input() {
        inputnew++;
        $('<li class="formation '+ inputnew +'">'
        + '<input placeholder="Modalidade" onkeyup="this.value=capitalize(this.value);" />'
        + '<input type="number" placeholder="Data" />'
        + '<input placeholder="Instituição" onkeyup="this.value=capitalize(this.value);" />'
            + '<span class="remove cursor_pointer">x</span>'
        + '</li>').prependTo($('section.duo div.academic_formation div.formations')); }

    $('span.remove').live('click', function() {
        if(inputnew > 1) {
            $(this).parents('li').remove();
        inputnew--; } });
    $(document).ready(function() { new_input(); });
/* função que insere e remove cadeia de inputs */

estou enfrentando os seguintes problemas, não sou experiente em jquery então não consegui passar disso, já melhorei bastante a função que achei e estudei mas estou com dois problemas, o principal é, aparentemente a função .live não funciona em jquery mais novo, então sou obrigado a usar o 1.8.3 para esta função dar certo e o segundo problema é que, eu preciso criar dentro da função new_input, todos os inputs e afins e tudo mais que eu desejo que apareça na div listada, ou seja, fica complicado de editar e ou melhorar e também fazer algumas funções funcionarem em conjunto, o problema da versão do jquery se for complicada, nem ligo muito, da para utilizar no 1.8.3 sem problemas, mas o que desejo mesmo é que eu possa escanear a div que tem os elementos que desejo duplicar.

no caso, eu teria

<div class="formations">
 <li class="formation">
        <input placeholder="Modalidade" onkeyup="this.value=capitalize(this.value);" />
        <input type="number" placeholder="Data" />
        <input placeholder="Instituição" onkeyup="this.value=capitalize(this.value);" />
  <span class="remove cursor_pointer">+</span>
 </li>
</div>

em html na página, normalmente escrito e então uma função que ao clicar em um ADD por exemplo, clonar este trecho em baixo

1 Resposta 1

2

Em relação ao .live() é só mudar para .on() e já podes usar versões mais recentes do jQuery.

Em relação a copiar/criar conteúdo podes usar o .clone() para exatamente copiar o que queres. Existe ainda template em HTML que permite ter HTML na página que não está ativo, serve só para ser copiado.

Um exemplo seria assim:

var inputnew = 0;

function new_input() {
  inputnew++;
  var template = document.getElementById('formations');
  var clone = document.importNode(template.content, true);
  $(clone).prependTo('section.duo div.academic_formation');
}

$(document).on('click', 'span.add', new_input);
$(document).on('click', 'span.remove', function() {
  if (inputnew > 1) {
    $(this).parents('li').remove();
    inputnew--;
  }
});

$(document).ready(new_input);
.cursor_pointer {
  cursor: pointer;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template id="formations">
  <div class="formations">
  <li class="formation">
    <input placeholder="Modalidade" onkeyup="this.value=capitalize(this.value);" />
    <input type="number" placeholder="Data" />
    <input placeholder="Instituição" onkeyup="this.value=capitalize(this.value);" />
    <span class="add cursor_pointer">+</span><span class="remove cursor_pointer">-</span>
  </li>
</div>
</template>

<section class="duo">
  <div class="academic_formation">
    <div class="formations"></div>
  </div>
</section>

13
  • puxa, ficou muito bom, não lembrava do <template> e já vi funcionando em ajax mas não me liguei nisso, ficou muito bom, só agora fazer não apagar o ultimo elemento, ou seja, sempre ficar 1, impedir que o último seja deletado, não entendi por que não funcionou visto que o if > 1 está ali, mas funcionou bem demais
    – flourigh
    Commented 5/05/2017 às 16:39
  • achei, tem um inputnew++ a mais ali no seu remover. removi e funcionou
    – flourigh
    Commented 5/05/2017 às 16:40
  • @flourigh exato, tinha esquecido de tirar. Corrigi agora.
    – Sergio
    Commented 5/05/2017 às 16:41
  • existe como não utilizar o template? ou seja, pegar direto do <section class="duo"> <div class="academic_formation"> <div class="formations">*****</div> </div> </section> sem utilizar o getelementbyid?
    – flourigh
    Commented 5/05/2017 às 16:47
  • 1
    @flourigh sim, usa var clone = document.querySelector('section.duo div.academic_formation div.formations').cloneNode(true);
    – Sergio
    Commented 5/05/2017 às 16:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .