jQuery Tokeninput添加多个onClick输入

jQuery Tokeninput add multiple input onClick

本文关键字：onClick 输入 Tokeninput 添加 jQuery      更新时间：2023-09-26

我使用jquery令牌输入并添加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 &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>

有人知道怎么解决这个问题吗？

只需要使用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à &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>
相关文章：