时间戳

首页 > 解决方案 > 使用 jquery clone() 在输入字段中生成一个新的 bootstarp Tokenfield 类

jquery - 使用 jquery clone() 在输入字段中生成一个新的 bootstarp Tokenfield 类

问题描述

去

http://jsfiddle.net/rns3hang/450/

新克隆的输入字段中的 TokenField 正在工作，但问题是它在输入字段中

而且我只想要一个带有一些预定义/常量标签的输入字段，并且还能够添加新的令牌或标签值

 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center"> Insert Diet</h2>
   <br /><table class="table table-bordered" >
</table>
<br>
   <div class="table-responsive">
    <table class="table table-bordered" id="crud_table">
     <tr>



      <th width="20%">Breakfast</th>
      <th width="20%">Pre Lunch</th>
      <th width="20%">Lunch</th>
      <th width="5%"></th>
     </tr>
     <tr class="tableinputs">

    `  
      <td><input type="text" class="break_name skill" value="Tea/Coffee"/></td>

      <td ><input type="text" class="mid_meal  skill" value="Fruits"/></td>

      <td ><input type="text"  class="lunch_name skill" value="Vegetables,salads"/></td>
      <td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>
     </tr>
    </table>
    <div align="right">
     <button type="button" name="add" id="add" class="btn btn-success btn-xs">Add</button>
    </div>
    <div align="center">
     <button type="button" name="save" id="save" class="btn btn-info">Save</button>
    </div>
    <br />
   </div>

  </div>
 </body>

jQuery代码

$(document).ready(function(){

 $('.skill').tokenfield({
  autocomplete:{
   source: ['Food1','Food2','Food3','Food4','Food5','CSS','Laravel','CakePHP'],
   delay:100
  },
  showAutocompleteOnFocus: true
 });



 var count = 1;
 var $table;

     $table=$('#crud_table tbody');

     var $existRow=$table.find('tr').eq(1);
      /* bind to existing elements on page load*/
      bindAutoComplete($existRow);
 $('#add').click(function(){



//$("#crud_table tbody  tr.tableinputs:last").clone().appendTo("#crud_table tbody");

var $row=$("#crud_table tbody  tr.tableinputs:last").clone();
 var $input=$row.find(":text").val("");
  $table.append($row);


/*
$(".break_name:last").val('');
$(".mid_meal:last").val('');
$(".lunch_name:last").val('');*/

    bindAutoComplete($row );

    $input.focus();

 }); 

 function bindAutoComplete($row ){
    /* use row as main element to save traversing back up from input*/
     $row.find('.skill').tokenfield({
  autocomplete:{
   source: ['Food1','Food2','Food3','Food4','Food5','CSS','Laravel','CakePHP'],
   delay:100
  },
  showAutocompleteOnFocus: true
 });
     $('.skill').on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value)
      event.preventDefault();
  });
});
}

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

//If this there is only one row left clear that row instead of removing it
if ($("#crud_table tbody tr").length === 1)
$("#crud_table tbody tr:last").find("input").val('');
else
  $("#crud_table tbody tr:last").remove();
 });

});

我尝试从输入字段中删除 value 属性，但它仍然不起作用

标签： jquerytwitter-bootstrapbootstrap-tokenfield

解决方案

我只想要一个输入字段

由于 bootstrap-tokenfield 的逻辑正在使用它，因此这有点具有挑战性。但我有一个可能的解决方案，可能会让你满意。我们尊重创建的新输入字段，但删除属性“名称”，因此表单将忽略它。

前：

$('.skill').on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value)
      event.preventDefault();
  });
});

后

$('.skill').on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value)
      event.preventDefault();
  });
      $(this).data('bs.tokenfield').$input.attr("name",""); //<- this is the new line
});

推荐阅读