jQuery令牌输入添加多个输入onClick
jQuery令牌输入添加多个输入onClick
提问于 2014-04-13 15:28:50
我使用jquery令牌输入和add-remove textbox js。如果单独运行它们，一切都可以正常运行。但当组合它们并添加更多txtbox时，令牌输入会一直在前一个文本框下面添加一个文本框。
以下是我的代码
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://loopj.com/jquery-tokeninput/src/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="http://loopj.com/jquery-tokeninput/styles/token-input.css" type="text/css" />
<link rel="stylesheet" href="http://loopj.com/jquery-tokeninput/styles/token-input-facebook.css" type="text/css" />
<script type="text/javascript">
var txtbox = '<tr style="width:730px; float:left">\n\
<td></td>\n\
<td><input type="text" name="relatetxt[]" class="relatetxt" required/></td><td style="width: 50px; margin-left:20px;">as </td>\n\
<td><select name="relateID[]">\n\
<option value="1">1</option>\n\
<input type="button" onClick="removRow(this)" value="del"/><br /></td></tr>';
function addRow(btn) {
$(btn).closest('tr').append(txtbox);
$(btn).ready(function() {
$(".relatetxt").tokenInput([
{id: 7, name: "Ruby"},
{id: 11, name: "Python"},
{id: 13, name: "JavaScript"},
{id: 17, name: "ActionScript"},
{id: 19, name: "Scheme"},
{id: 23, name: "Lisp"},
{id: 29, name: "C#"},
{id: 31, name: "Fortran"},
{id: 37, name: "Visual Basic"},
{id: 41, name: "C"},
{id: 43, name: "C++"},
{id: 47, name: "Java"}
], {
hintText: "Producer",
theme: "facebook",
searchingText: "Meowing...",
preventDuplicates: true,
resultsFormatter: function(item){ return "<li style='width:300px;'>" + "<img src='" + item.pic + "' title='" + item.name + "' width='40px' style=' vertical-align:middle;' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name' style='width:200px; float:left; word-wrap:break-word'>" + item.name + "</div></div></li>" },
tokenFormatter: function(item) { return "<li><p>" + item.name + "</p></li>" },
});
});}
function removRow(btn) {
$(btn).closest('tr').remove();}
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".relatetxt").tokenInput([
{id: 7, name: "Ruby"},
{id: 11, name: "Python"},
{id: 13, name: "JavaScript"},
{id: 17, name: "ActionScript"},
{id: 19, name: "Scheme"},
{id: 23, name: "Lisp"},
{id: 29, name: "C#"},
{id: 31, name: "Fortran"},
{id: 37, name: "Visual Basic"},
{id: 41, name: "C"},
{id: 43, name: "C++"},
{id: 47, name: "Java"}], {
hintText: "Producer",
theme: "facebook",
searchingText: "Meowing...",
preventDuplicates: true,
resultsFormatter: function(item){ return "<li style='width:300px;'>" + "<img src='" + item.pic + "' title='" + item.name + "' width='40px' style=' vertical-align:middle;' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name' style='width:200px; float:left; word-wrap:break-word'>" + item.name + "</div></div></li>" },
tokenFormatter: function(item) { return "<li><p>" + item.name + "</p></li>" },
});
});
</script>
</head>
<body>
<table width="730px">
<tr style="width:730px; float:left"><td><label>input: </label></td><td><input type="text" name="relatetxt[]" class="relatetxt"/></td><td style="width: 50px; margin-left:20px;">as </td><td>
<select name="relateID[]">
<option value="1">1</option>
</select> <input type="button" onClick="addRow(this)" value="add more"/></td></tr></table>
</body>
</html>有人知道怎么解决这个问题吗？
回答 1
Stack Overflow用户
发布于 2015-09-05 12:58:27
只需要添加按钮使用onClick地址行
<script>
var id = 1;
function addRow(btn) {
id++;
var txtbox = '<tr style="width:100%; float:left">\n\
<td></td>\n\
<td style="width: 300px;"><input type="text" name="relatetxt[]" class="relate'+ id +'" required/></td><td style="width: 50px; margin-left:20px;">là </td>\n\
<td style="width: 350px; margin-left:20px;"><select name="relateID[]">\n\
<?php $rel = get_checkbox("relate","id","ASC","0","10000");
foreach ($rel as $lists){
echo '<option value="'.$lists->relate_id.'">'.$lists->relate_name.'</option>';
} ?></select> \n\
<input type="button" onClick="removRow(this)" value="Xóa"/><br /></td></tr>';
$(btn).closest('tr').append(txtbox);
$(document).ready(function() {
$(".relate"+id+"").tokenInput(<?php preget_am("anime") ?>, {
hintText: "Producer",
theme: "facebook",
searchingText: "Meowing...",
preventDuplicates: true,
tokenLimit: 1,
resultsFormatter: function(item){ return "<li style='width:300px;'>" + "<img src='" + item.pic + "' title='" + item.name + "' width='40px' style=' vertical-align:middle;' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name' style='width:200px; float:left; word-wrap:break-word'>" + item.name + "</div></div></li>" },
tokenFormatter: function(item) { return "<li><p>" + item.name + "</p></li>" },
});
});
}
function removRow(btn) {
$(btn).closest('tr').remove();
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23040016
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号