Javascript jQuery Tokeninput在单击时添加多个输入_Javascript_Jquery_Jquery Tokeninput

Javascript jQuery Tokeninput在单击时添加多个输入

javascript jquery

Javascript jQuery Tokeninput在单击时添加多个输入,javascript,jquery,jquery-tokeninput,Javascript,Jquery,Jquery Tokeninput,我正在使用jquery令牌输入和add-remove-textboxjs。如果分开运行，一切正常。但是当组合它们并添加更多的txtbox时，tokeninput会继续在上一个文本框的下方添加一个文本框这是我的密码 <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></scr

我正在使用jquery令牌输入和add-remove-textboxjs。如果分开运行，一切正常。但是当组合它们并添加更多的txtbox时，tokeninput会继续在上一个文本框的下方添加一个文本框

这是我的密码

<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 &nbsp;</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 &nbsp;</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>


var txtbox='\n\
\n\
作为\n\
\n\
1\n\

；
函数addRow（btn）{
$（btn）.最近（'tr'）。追加（txtbox）；
$（btn）.ready（函数（）{
$（“.relateText”）.tokenInput([
{id:7，名称：“Ruby”}，
{id:11，名称：“Python”}，
{id:13，名称：“JavaScript”}，
{id:17，名称：“ActionScript”}，
{id:19，名称：“Scheme”}，
{id:23，名称：“Lisp”}，
{id:29，姓名：“C#”}，
{id:31，名称：“Fortran”}，
{id:37，名称：“Visual Basic”}，
{id:41，姓名：“C”}，
{id:43，名称：“C++”}，
{id:47，名称：“Java”}
], {
hintText:“制作人”，
主题：“facebook”，
搜索文字：“喵喵……”，
重复：正确，
resultsFormatter:function（item）{return“”+“”+“”+item.name+“”}，
tokenFormatter:函数（项）{return“”+item.name+”“}，
});
});}
功能removRow（btn）{
$（btn）.closest（'tr'）.remove（）；}
$（文档）.ready（函数（）{
$（“.relateText”）.tokenInput([
{id:7，名称：“Ruby”}，
{id:11，名称：“Python”}，
{id:13，名称：“JavaScript”}，
{id:17，名称：“ActionScript”}，
{id:19，名称：“Scheme”}，
{id:23，名称：“Lisp”}，
{id:29，姓名：“C#”}，
{id:31，名称：“Fortran”}，
{id:37，名称：“Visual Basic”}，
{id:41，姓名：“C”}，
{id:43，名称：“C++”}，
{id:47，名称：“Java”}{
hintText:“制作人”，
主题：“facebook”，
搜索文字：“喵喵……”，
重复：正确，
resultsFormatter:function（item）{return“”+“”+“”+item.name+“”}，
tokenFormatter:函数（项）{return“”+item.name+”“}，
});
});
输入：as
1.

有人知道如何解决这个问题吗？

只需使用onClick addrow添加按钮

<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à &nbsp;</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>


var-id=1；
函数addRow（btn）{
id++；
var txtbox='\n\
\n\
lá\n\
\n\
\n\

；
$（btn）.最近（'tr'）。追加（txtbox）；
$（文档）.ready（函数（）{
$（“.relate”+id+）.tokenInput（{
hintText:“制作人”，
主题：“facebook”，
搜索文字：“喵喵……”，
重复：正确，
限额:1,，
resultsFormatter:function（item）{return“”+“”+“”+item.name+“”}，
tokenFormatter:函数（项）{return“”+item.name+”“}，
});
});
}
功能removRow（btn）{
$（btn）.最近（'tr'）.remove（）；
}

nvm，我通过myself@SreerejithSS我在下面添加了一个示例