Javascript 引导标记输入无法使用jquery处理动态添加的新表行

引导标记输入无法处理动态添加的新行。实际上，我正在克隆一个隐藏的表行，其中包含一些输入字段和一个图标。点击该图标，模态表单出现，在提交该模态表单时，我将该模态表单中的一些值设置到该行中包含的输入引导标记输入字段中。请注意，所有行具有相同的输入字段，但具有不同的tr行ID和输入标记输入字段ID。当我尝试为任何动态添加的行在bootstrap tagsinput字段中设置值时，值总是针对隐藏的tr行设置的，我不知道为什么tagsinput会发生这种情况。我试图为其他输入字段（textfield、numberfield）设置值，但它们工作正常。这有什么问题

 $('.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() );
    });

每个表行都有这些字段（tagsinput字段和modalform字段）

---

在任何页面上都不能有任何重复的id：id必须是唯一的。为每个

#modelbox

添加一个递增的数字，或者将它们转换为一个类

。modelbox

是否可以解决问题。我不认为这样可以解决您的问题，我会回答这个问题，但我的评论将阻止所有对id的引用一次运行，然后在其他地方失败。虽然我怀疑你有什么好的理由这样做，但通常都会解释反对票的原因

<td>
      <span id="modelbox" data-target="#myModal" href="#myModal" data-toggle="modal" class="glyphicon glyphicon-plus"></span>
</td>     

 <td>    
      <input contenteditable="false" name="unique_tag" 
      class = "myinput" id="tagsinputid" data-role="tagsinput"/> 
 </td>

 //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("<span class=span1 > "+ item + "</span>");
      }
  });

  $('#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();
  });