表格内AJAX动态ID绑定失效求助：多行输入框插入异常

嘿，这个动态ID导致TokenInput失效的问题我之前也碰到过，咱们一步步来解决它！

你遇到的核心问题是动态生成的ID没有被TokenInput正确绑定——要么是ID格式在JS选择器里出了冲突，要么是初始化逻辑没覆盖到每一行的输入框。下面给你两种可行的解决方案：

方案1：循环内逐个初始化输入框 #

在PHP的while循环里，每生成一个输入框就紧接着初始化它的TokenInput，确保每个输入框都被单独绑定，不会漏过。我把ID里的方括号换成了下划线，这样能避免和jQuery属性选择器混淆，更稳妥：

<?php
$products_specification_ajax = OSCOM::link('products_specification_ajax.php');
$t = 0;
while ($Qspecification->fetch()) {
    // 生成表格行和输入框
    echo '<tr>';
    echo '<td><input type="text" id="specificationName_' . $t . '" placeholder="输入规格名称" /></td>';
    // 直接在循环内初始化当前输入框的TokenInput
    echo '<script>
        $(function() {
            $("#specificationName_' . $t . '").tokenInput("' . $products_specification_ajax . '", {
                // 这里放你的TokenInput配置，比如：
                theme: "facebook",
                tokenLimit: 5,
                placeholder: "搜索或添加规格..."
            });
        });
    </script>';
    echo '</tr>';
    $t++;
}
?>

方案2：用类选择器统一初始化（更优雅） #

如果不想在循环里写重复的JS代码，可以给所有输入框加一个统一的类，然后在页面底部统一遍历初始化：

PHP循环部分：

<?php
$products_specification_ajax = OSCOM::link('products_specification_ajax.php');
$t = 0;
while ($Qspecification->fetch()) {
    echo '<tr>';
    // 给输入框加统一类名，同时保留唯一ID（方便后续单独操作）
    echo '<td><input type="text" id="specificationName_' . $t . '" class="specification-input" /></td>';
    echo '</tr>';
    $t++;
}
?>

JS初始化部分（放在页面底部或DOM ready事件里）：

$(document).ready(function() {
    // 遍历所有带类名的输入框，逐个初始化
    $('.specification-input').each(function() {
        $(this).tokenInput("<?php echo $products_specification_ajax; ?>", {
            // 你的配置项，比如：
            preventDuplicates: true,
            hintText: "输入规格名称进行搜索..."
        });
    });
});

关键检查点 #

1. 确认ID唯一性：打开浏览器开发者工具（F12）→ Elements面板，查看每个输入框的ID是不是specificationName_0、specificationName_1这样依次递增的，没有重复。
2. JS文件加载正常：在Network面板里检查jquery.tokeninput.min.js有没有成功加载，没有404错误。
3. 初始化时机正确：确保初始化代码是在DOM加载完成后执行的（用$(document).ready()包裹），或者在输入框生成之后立即执行。

这样调整后，每个行的输入框应该都能独立触发TokenInput的AJAX功能，不会再出现所有内容都插入到第一行的问题啦！

内容的提问来源于stack exchange，提问作者Zigoto