TokenInput 在引导模式中加载时停止工作答案

【问题标题】：TokenInput stops working when loaded in bootstrap modalTokenInput 在引导模式中加载时停止工作
【发布时间】：2015-04-17 14:20:38
【问题描述】：

（我还在学习 js / jquery）所以请多多包涵 - 我在页面中有以下代码 - 如果我回显 $data，它会完美运行 - 单词加载正确。但是当我回显模式（包含相同的 $data）时，功能停止，我只是在框中输入文本。

该页面具有相同的包含（它是我用于独立代码的测试页面）。我是否需要将令牌 js 和 css 文件重新加载到模态中（尝试过但不起作用）-我缺少什么？

token输入没有多余的js，只是加载js和css文件。

$data='<span class="font-heavy" id="">To:</span> 
             <input type="text" id="users" name="blah" placeholder="Add friends"/>
            <input type="hidden"  id="tags"/>


  <script type="text/javascript">
    $(document).ready(function() {

        $("#users").tokenInput([
            {id: 7, name: "Ruby"},
            {id: 11, name: "Python"},
            {id: 47, name: "Java"}

        ],{
            prePopulate: [

                /*{id: 123, name: "Pri User"},
                {id: 555, name: "Bob Hoskins"}*/
            ],theme: "facebook",preventDuplicates: true, hintText: "Add friends"
        });
    });
    </script>
    ';



$modal = '<a href="#" id="NewRatingsLink">Load Modal</a>

<script type="text/javascript">
    $(document).ready(function(){
        $("#NewRatingsLink").click(function(){
            $("#newRatingsModal").modal("show");
      });
  });
</script> 

<style>.modal {
      overflow-y: hidden;
  }</style>


<div id="newRatingsModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Overall Rating: '.@RatingStars($ave).'</h4>
            </div>
            <div class="modal-body">

        <div id="listratings">
        '.$data.'
      </div>

            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-green" data-dismiss="modal">Cancel</button>'.@$submit.'
                <div class="message"></div>
            </div>
        </div>
    </div>
</div><!-- END of Modal HTML -->';

谢谢！

【问题讨论】：

jQuery TokenInput : Tokens are not getting added的可能重复

标签： jquery bootstrap-modal jquery-tokeninput

【解决方案1】：

这可能是一个 z-index 问题。使用 TokenInput 设置中的参数将 TokenInput 的 z-index 设置为高于模式弹出窗口。

   $("#users").tokenInput([
        {id: 7, name: "Ruby"},
        {id: 11, name: "Python"},
        {id: 47, name: "Java"}

    ],{
        prePopulate: [

            /*{id: 123, name: "Pri User"},
            {id: 555, name: "Bob Hoskins"}*/
        ],theme: "facebook",
preventDuplicates: true, 
hintText: "Add friends",
z-index: 9999
    });

【讨论】：

嗨 - 谢谢。仍然没有，我一直想弄清楚为什么 - 很奇怪..
@FrancoisBrand 真的吗？奇怪——你能在 jfiddle 上做一个演示吗？

【解决方案2】：

我更改了所有 css 文件中的所有 z-index 值，现在它已修复，根据之前的问题，一行没有解决我的问题。另外 - 至于重复的问题，我什至不知道它们正在后台加载，我的文本框甚至没有出现，所以我不知道这可能是 z-index 的事情。

无论如何 - 感谢所有输入，它现在可以工作了！

【讨论】：