Balises bootstrapinput ne fonctionne pas avec les nouvelles lignes de table ajoutées dynamicment avec jQuery

Balises bootstrapinput ne fonctionne pas avec les nouvelles lignes ajoutées dynamicment. En fait, je clone une ligne de table masquée contenant des champs de saisie et une icône. En cliquant sur cette icône, le formulaire modal apparaît et lors de la soumission de ce formulaire modal, je définis certaines valeurs de ce formulaire modal dans le champ d’entrée des balises bootstrap d’entrée contenu dans cette ligne. Veuillez noter que toutes les lignes ont les mêmes champs d’entrée, mais qu’elles ont des identifiants de lignes de tr et de tags d’entrée de balises d’entrée différents. Lorsque j’essaie de définir une valeur dans le champ bootstrap tagsinput pour toute ligne ajoutée dynamicment, la valeur est toujours définie par rapport à la ligne cach cachée, je ne sais pas pourquoi cela se produit avec tagsinput. J’ai essayé de définir la valeur pour d’autres champs d’entrée (textfield, numberfield) mais ils fonctionnent bien. Quel est le problème avec cela?

Mon code:

Je suis en train de cloner une ligne de la table avec cette fonction:

$('.table-add').click(function () { // var $tr = $TABLE.find('tr.hide'); // var $clone = $tr.clone(true).addClass('hide table-line'); // $tr.removeClass('hide table-line'); var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line'); hid = $TABLE.find('tr.hide').attr('id'); // //Assigning every table row a unique ID var max=0; $('table').find('tr').each(function(){ var id=parseInt($(this).attr('id')); if (id>=max){ max = id; } }); //cloning row with new ID $clone.attr('id', parseInt(max)+1); $clone.find('input.myinput').attr('id', parseInt(max)+1); $clone.appendTo( $('#'+hid).parent() ); });

Toutes les lignes de la table ont ceci (champs tagsinput et modalform).

Lorsque le bouton de formulaire modal est cliqué, le code suivant fonctionne, dans lequel je récupère la ligne parent tr et un ID unique, l’enregistre pour une autre action et remplit le formulaire modal avec quelques mots.

  //Click on model box $('tr #modelbox').click(function() { var $row = $(this).closest('tr'); var tbid = $row.attr('id'); // table row ID $('#myModal').data('current', tbid); //save current tbid var fieldOption = [] $row.find('#words option').each(function() { fieldOption.push($(this).val()); }); console.log(fieldOption); $('.modal-body-inner').html(''); for(var i = 0, size = fieldOption.length; i < size ; i++){ var item = fieldOption[i]; $('.modal-body-inner').append(" "+ item + ""); } });

En cliquant sur le formulaire modal, je prends la ligne du tableau et mets la valeur en regard du champ tagsinput pour cette ligne du tableau qui ne fonctionne pas dans mon cas. Cela ne fonctionne pas pour le champ tagsinput. Je ne sais pas pourquoi, mais cela fonctionne pour les autres champs de saisie. Lorsque je définis une valeur dans tagsinput pour cette ligne, ce code définit une valeur pour le champ tagsinput pour une ligne masquée.

  $('#modelformbuttonclick').click(function() { var tableRowId = $('#myModal').data('current'); c = '#' + tableRowId; //removing all tags if anyone updates tags $(c+ ' input.myinput').tagsinput('removeAll'); var count=1; var color = ["Europe","America","Australia","Africa","Asia", "Asia2", "Africa2"]; $('.modal-body-inner span.myclass').each(function() { c = '#' + tableRowId; var randomNumber = Math.floor(Math.random()*color.length); $(c + ' input.myinput').tagsinput('add', { "name": "tagsdata", "value": $(this).text() , "text": $(this).text(), "continent": color[randomNumber]}); count = count+1; }); submitForm(); });