使用jquery clone()在输入字段中生成新类的bootstarp Tokenfield [英] Using jquery clone() a new class of bootstarp Tokenfield generates within the input field
问题描述
转到
http://jsfiddle.net/rns3hang/450/
TokenField正在工作，但问题是它在输入字段中
TokenField in newly cloned input field are working but the problem is IT IS INSIDE A INPUT FIELD
我只想一个输入字段，带有一些预定义/常量标签，并能够添加新的令牌或标签值
And I want just one input field with some predefined/constant tags and to be able to add new token or tags values as well
<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属性，但仍然无法正常工作
I have tried removing the value attribute from input field but it still doesn't work
推荐答案
我只需要一个输入字段
And I want just one input field
由于bootstrap-tokenfield的逻辑正在使用它，所以这有点挑战. 但是我有一个可能的解决方案，可能会让您满意. 我们尊重创建的新输入字段，但删除属性名称"，因此该属性将被表单忽略.
That's a bit challenging due the logic of the bootstrap-tokenfield is using it. But I got a possible solution, that might please you. We respect the new input fields created, but remove the attribute "name", so it is ignored by the form.
之前:
$('.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
});
这篇关于使用jquery clone()在输入字段中生成新类的bootstarp Tokenfield的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
