Question

我使用jquery令牌输入和添加删除文本框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 &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>

任何人都知道如何解决这个问题？

Answer 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>

jQuery Tokeninput在onClick上添加多个输入

1 个答案: