Généralisation de l’ajout / de la suppression de jQuery dynamic pour plusieurs formulaires

Actuellement, j’ai un code qui fonctionne pour append et supprimer dynamicment des entrées de formulaire sur ma page. J’ai plusieurs formulaires à inclure sur la page. J’ai donc créé une action d’événement dans laquelle ils pouvaient appuyer sur un bouton et masquer tous les formulaires à l’exception du formulaire correspondant. Cela a bien fonctionné, mais cela a créé un conflit avec mon code jQuery / javascript, car le code utilise un nom de classe pour append ou supprimer de manière dynamic des champs de saisie. Les deux formes devraient être sous le même nom de classe pour que je puisse utiliser la fonction jQuery telle quelle, mais cela crée un conflit et la fonction cesse de fonctionner. Je pourrais juste écrire deux versions de la fonction (une pour chaque classe), mais j’essaie de trouver un moyen de généraliser cela, afin de ne pas avoir autant de fonctions. Je pensais à faire quelque chose comme ça:

$('.ccinput').addClass('dinput').removeClass('ccinput'); 

où je modifierais le nom de classe de chaque formulaire en conséquence, afin qu’ils soient les seuls à communiquer avec la fonction jQuery. Cette méthode semble être très sujette aux erreurs, en particulier avec plus de 2 formulaires (je prévois d’avoir 4 formulaires au total). Savez-vous d’une autre manière que je peux accomplir cela? Voici mon code html pour référence:

EDIT: J’ai apporté des modifications significatives au code, voici donc la nouvelle version. J’ai supprimé toutes les valeurs d’ID des entrées de formulaire et modifié la fonction jQuery afin qu’elle n’utilise pas les valeurs d’ID comme sélecteurs. Cela a supprimé certains conflits. Et j’essaie maintenant d’utiliser attr (‘classe’, ‘newclass’) pour que la fonction jQuery fonctionne pour les deux codes. Cela semble fonctionner parfaitement pour la première forme, mais il refuse de fonctionner pour la seconde. Je ne sais pas pourquoi.

       $(document).ready(function() { $("#table1").hide(); $("#table2").hide(); $("#cc_button").click(function(){ $("#table1").show(); $("#table2").hide(); $("#cctable tr").attr('class', 'dinput'); $("#dbtable tr").attr('class', 'dbinput'); }); $("#db_button").click(function(){ $("#table2").show(); $("#table1").hide(); $("#dbtable tr").attr('class', 'dinput'); $("#cctable tr").attr('class', 'ccinput'); }); $('#btnAdd').click(function() { var num = $('.dinput').length; // how many "duplicatable" input fields we currently have var newNum = new Number(num + 1); // the numeric ID of the new input field being added // create the new element via clone(), and manipulate it's ID using newNum value var newElem = $('.dinput:last').clone(); // insert the new element after the last "duplicatable" input field $('.dinput:last').after(newElem); $(".dinput:last td:first").replaceWith( "" + newNum + "" ); // enable the "remove" button $('#btnDel').attr('disabled',''); $(".date").mask("99/99/9999"); // business rule: you can only add 20 names if (newNum == 20) $('#btnAdd').attr('disabled','disabled'); }); $('#btnDel').click(function() { var num = $('.dinput').length; // how many "duplicatable" input fields we currently have $('.dinput:last').remove(); // remove the last element // enable the "add" button $('#btnAdd').attr('disabled',''); // if only one element remains, disable the "remove" button if (num-1 == 1) $('#btnDel').attr('disabled','disabled'); }); $(".date").mask("99/99/9999"); });    
 CC DB 
 
 <form id="ccards" method="post" action=""> 
 
 
 
# (last four digits)
 
Amount
 
Approval
 
Date Received
 
 
 
 
 1 
 
  
 
  
 
  
 
  
 
 
 
 
   
   
 
 <form id="db" method="post" action=""> 
 
 
 
DB #
 
Amount
 
Date
 
 
 
 
 1 
 
  
 
  
 
  
 
 
 
 
   
   
   

• Obtenir des dimensions précises pour un object DOM nouvellement créé
• créer un tableau dynamic avec jquery
• Comment append et supprimer dynamicment des tabs JQuery?
• Comment créer une carte-image dynamic-interactive avec jQuery?
• Comment append (cloner) des champs de formulaire à l’aide de jQuery et incrémenter les identifiants et les noms

• Jquery comment lier un événement clic à des éléments créés dynamicment?

 $("#cc_button").click(function(){ $("#table1").show(); $("#table2").hide(); $("#cctable tr").attr('class', 'dinput'); $("#dbtable tr").attr('class', 'dbinput'); }); $("#db_button").click(function(){ $("#table2").show(); $("#table1").hide(); $("#dbtable tr").attr('class', 'dinput'); $("#cctable tr").attr('class', 'ccinput'); }); 

         
 CC DB 
 
 
 
 
 
 
# (last four digits)
 
Amount
 
Approval
 
Date Received
 
 
 
 
 1 
 
  
 
  
 
  
 
  
 
 
 
 
   
  
 
 
 
 
 
 
 
DB #
 
Amount
 
Date
 
 
 
 
 1 
 
  
 
  
 
  
 
 
 
 
   
  
 
   

 //when the Add Field button is clicked $("#add").click(function (e) { //Append a new row of code to the "#items" div $("#items").append('
Delete
'); });