在一个页面上多次使用相同的 JQuery 令牌输入框答案

【问题标题】：Using the same JQuery tokeninput box multiple times on a page在一个页面上多次使用相同的 JQuery 令牌输入框
【发布时间】：2012-04-04 18:54:47
【问题描述】：

我在我的 rails 应用程序中使用 Jquery TokenInput 来帮助用户快速输入信息。每个用户都有一个个人资料，上面有许多相同类别的项目，称为college_items。每个college_item 都有自己的编辑链接，它会弹出一个模态框，其中包含模态框的适当编辑表单。

我关注了 Ryan Bates 的截屏视频，并使用以下代码让 TokenInput 正常工作：
在 application.js 中：

$(function() {
 $("#education_major_tokens").tokenInput("/majors.json", {
   theme: "facebook"
  })
});

在我看来：

<%= f.text_field :major_tokens %>

在我的模型中：

def major_tokens=(ids)
 self.major_ids = ids.split(",")
end

我遇到的问题是这个相同的字段出现在每个编辑表单中，因此在第一项的编辑表单中一切正常，但在任何其他项目的编辑表单中，javascript 不是初始化。我的问题是如何更改 javascript 以在每次出现此表单元素时进行初始化，而不仅仅是第一次出现？

编辑：我认为这样的解决方案可能是：

$(function() {
 $("#education_major_tokens").each(function(){
   $(this).tokenInput("/majors.json", {
   theme: "facebook"
   })
  });
});

但它仍然不适合我。有人有什么想法吗？

编辑 2：终于想通了。请参阅上面的编辑，我没有使用#education_major_tokens，而是将每个输入设置为：class=>“major_input”并将代码中的“#education_major_tokens”更改为“.major_input”

【问题讨论】：

【解决方案1】：

我认为这有点晚了，但请尝试为您的令牌字段分配一个类

<input class="yourtokenfield" type="text" />

之后使用这个

$(function() {
 $(".yourtokenfield").each(function(){
   $(this).tokenInput("/majors.json", {
   theme: "facebook"
   })
  });
});

我认为你的问题是由于类名不正确，记住 ID 只能在你的 HTML 文档中出现一次。

【讨论】：