Répéter une div lorsque vous cliquez sur un bouton

Le code ci-dessous est pour la répétition d'un div. Mais il ne fonctionne pas. S'il vous plaît aider moi.

<html>
  <head>
    <script>
      $(".repeat").live('click', function () {
        var $self = $(this);
        $self.after($self.parent().clone());
        $self.remove();
      });
  </script>
  </head>
  <body>
    <form>
      <div class="repeatable">
        <table border="1">
        <tr><td><input type="text" name="userInput[]"></td></tr></table>
        <button class="repeat">Add Another</button>
      </div>
    <input type="submit" value="Submit">
    </form>
  </body>
</html>
  • vous manquez de jquery, y compris
  • Ouchakov Nik... j'ai compris, mais il ne fonctionne pas
  • Je ne sais pas si c'était votre intention, mais vous code est la répétition d'un div à l'intérieur c'est cloné source: un div .repeatable l'intérieur d'un autre .repeatable. Si vous voulez être au même niveau de la hiérarchie essayer: var parent = $self.parent(); parent.after(parent.clone());.
InformationsquelleAutor user3189828 | 2014-01-15
  1. 4

    D'abord ajouter jquery dans votre code et l'utilisation sur() en place de live().

    Aussi d'écrire du code dans $(function(){...}) donc, que votre code fonctionne après document ready

    <script src="http:/code.jquery.com/jquery-1.9.1.js"></script>
<script>
   $(function () {
       $(".repeat").on('click', function () {
          var $self = $(this);
          $self.after($self.parent().clone());
          $self.remove();
       });
   });
</script>

    Travail De Démonstration

    Mis à jour, si vous voulez qu'il fonctionne pour more inputs ensuite, essayez ceci,

    $(function () {
    $(".repeat").on('click', function (e) {
        e.preventDefault();//to prevent form submit
        var $self = $(this);
        $self.before($self.prev('table').clone());//use prev() not parent()
        //$self.remove();//remove this line so you can add more inputs
    });
});

    Mise À Jour De La Démo

    • il ne répétez deux fois de suite après que la deuxième div disparait.... j'ai besoin de répéter que les div à chaque fois lorsque je clique sur un bouton
    • voir mon updated answer et demo.
    InformationsquelleAutor Rohan Kumar
  2. 0

    La $(".repeat") de construction dit que jQuery doit être utilisé.
    Essayez d'ajouter <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> avant votre <script>

    • merci il fonctionne
    InformationsquelleAutor Pragmatist
  3. 0

    Essayer cette

    HTML

    <body>
    <form>
        <div class="parent">
      <div class="repeatable">
        <table border="1">
        <tr><td><input type="text" name="userInput[]"></td></tr></table>
        <button class="repeat">Add Another</button>
      </div>
      </div>
    <input type="submit" value="Submit">
    </form>
  </body>

    Jquery

    $(document).on('click', '.repeat', function (e) {
    e.preventDefault();
    $('.repeatable').parent('div.parent').append($('.parent').children('div:first').html());
});

    Voir jsfiddle,

    InformationsquelleAutor Robin C Samuel
  4. 0

    utilisation

    $(document).on('click', '.repeat', function () {

    au lieu de

    $(".repeat").live('click', function () {
    • Par la docs: Comme de jQuery 1.7, .délégué() a été remplacé par le .sur() de la méthode.
    • bon, d'accord, puis utilisez ceci: $(document).on('click', '.répéter', function () {...
    • Donc, si vous êtes d'accord, vous pouvez mettre à jour votre réponse à l'augmentation de sa qualité.
    • bon, je l'ai fait... 😉
    InformationsquelleAutor Peter Bankuti