bâtiment parties de forme dynamique utilisant jQuery

Question

(Hope cela ne sont pas dupliqués, deuxième tentative de soumettre cette question)

Je travaille sur une forme dans laquelle je voudrais donner à l'utilisateur la possibilité d'ajouter un nombre indéterminé de contacts (nom et numéro de téléphone). Je veux juste montrer une ligne de ces champs de formulaire pour commencer, et permettre à l'utilisateur de cliquer sur un élément qui ajoutera des doublons de la ligne initiale (vide bien sûr et avec des identifiants mis à jour pour manipuler ces données quand il revient au contrôleur (Application ASP.NET MVC)

J'ai trouvé quelques exemples qui fonctionnent avec la version 1.2.x de la librairie jQuery, mais je n'arrive pas à les utiliser avec 1.3.2. est lié à la méthode $ .clone() Lorsque j'appelle cette méthode sur un sélecteur/élément, la page effectue une actualisation complète et l'utilisateur reçoit un formulaire vierge

L'exemple actuel travailler avec (tiré de http://devblog.jasonhuck.com/assets/infiniteformrows.html) ressemble à:

Le tableau -

<table id="tabdata"> 
      <thead> 
       <tr> 
        <th>Row</th> 
        <th>Cell 1</th> 
        <th>Cell 2</th> 
        <th>Cell 3</th> 

        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td><a id="addnew" href="">Add</a></td> 
        <td><input id="n0_1" name="n0_1" type="text" /></td> 
        <td><input id="n0_2" name="n0_2" type="text" /></td> 

        <td><input id="n0_3" name="n0_3" type="text" /></td> 
        <td></td> 
       </tr> 
      </tbody> 
     </table> 

Le script -

<script type="text/javascript"> 
    $(function() { 
     var newRowNum = 0; 

     $('#addnew').click(function() { 
      newRowNum++; 
      var addRow = $(this).parent().parent(); 
      var newRow = addRow.clone(); 
      $('input', addRow).val(''); 
      $('td:first-child', newRow).html(newRowNum); 
      $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>'); 
      $('input', newRow).each(function(i) { 
       var newID = newRowNum + '_' + i; 
       $(this).attr('id', newID).attr('name', newID); 
      }); 
      addRow.before(newRow); 

      $('a.remove', newRow).click(function() { 
       $(this).parent().parent().remove(); 
       return false; 
      }); 

      return false; 
     }); 
    }); 
</script> 

Lorsque la méthode indique "var = newRow addRow.clone();", la page se recharge. Aucun indice quant à la raison, mais l'exécution du script par rapport à la version précédente de jQuery, ça fonctionne très bien. Je préférerais ne pas revenir dans les versions si je peux l'aider.

Des pensées? Y a-t-il une meilleure façon de s'y prendre? Cela devrait être assez simple, mais s'avère plus fastidieux que je ne le voudrais avec la bibliothèque que j'ai choisie.

Answer 1

Here is an example de votre code. Cela fonctionne bien pour moi dans Firefox 3 et IE 7. Le code utilise jQuery 1.3.2. Si vous souhaitez modifier le code, ajoutez simplement /edit à l'URL.

Quelques idées -

• Quel navigateur vous regardez le code qui ne fonctionne pas?
• Avez-vous d'autres bibliothèques JavaScript que vous utilisez qui pourraient causer des conflits?