jQuery tokeninput为1个输入生成多个输入

Question

我遇到了jQuery tokeninput输入的问题，这是我的ruby on rails代码：

<% @free_preferences.each do |fp| %>
<% eventCriteria = EventCriteria.find_by_id(fp.event_criteria_id)%>
<% if !eventCriteria.is_exclusive? %>
    <% form_for fp do |f| %>

        <%= f.label :tag_tokens1, eventCriteria.name %>
        <%= f.text_field :tag_tokens1, "data-pre" => fp.tags.map(&:attributes).to_json %>

        <%= f.submit "Save preference", :disable_with => 'Saving preference...' %>
    <% end %>
<% else %>
    <% form_for fp do |f| %>

        <%= f.label :tag_tokens2, eventCriteria.name %>
        <%= f.text_field :tag_tokens2, "data-pre" => fp.tags.map(&:attributes).to_json %>

        <%= f.submit "Save preference", :disable_with => 'Saving preference...' %>
    <% end %>
<% end %>

这是生成的html源代码：

<form accept-charset="UTF-8" action="/subscription_preferences/128" class="edit_subscription_preference" id="edit_subscription_preference_128" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="bYJedYxgjjA+C+CWUkZpXH3mxNxOf8XPQgwp5/DEUp8=" /></div>  
        <label for="subscription_preference_tag_tokens1">Explicit include</label>
        <input data-pre="[{&quot;updated_at&quot;:&quot;2012-03-20T08:48:53Z&quot;,&quot;name&quot;:&quot;Windows xp&quot;,&quot;id&quot;:70,&quot;created_at&quot;:&quot;2012-03-20T08:48:53Z&quot;}]" id="subscription_preference_tag_tokens1" name="subscription_preference[tag_tokens1]" size="30" type="text" />

<input data-disable-with="Saving preference..." id="subscription_preference_submit" name="commit" type="submit" value="Save preference" />

<form accept-charset="UTF-8" action="/subscription_preferences/129" class="edit_subscription_preference" id="edit_subscription_preference_129" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="bYJedYxgjjA+C+CWUkZpXH3mxNxOf8XPQgwp5/DEUp8=" /></div>  
        <label for="subscription_preference_tag_tokens2">Explicit exclude</label>
        <input data-pre="[]" id="subscription_preference_tag_tokens2" name="subscription_preference[tag_tokens2]" size="30" type="text" />

<input data-disable-with="Saving preference..." id="subscription_preference_submit" name="commit" type="submit" value="Save preference" />

看起来不错，但问题是每个subscription_preference_tag_tokensX输入都会创建四个jQuery标记输入，如果我用firebug检查这就是代码：

    <form accept-charset="UTF-8" action="/subscription_preferences/128"  class="edit_subscription_preference" id="edit_subscription_preference_128" method="post">
<div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;   padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display:       inline; ">

<label for="subscription_preference_tag_tokens1">Explicit include</label>
<ul class="token-input-list-facebook">
<ul class="token-input-list-facebook">
<ul class="token-input-list-facebook">
<ul class="token-input-list-facebook">

<input data-pre="[{"updated_at":"2012-03-20T08:48:53Z","name":"Windows xp","id":70,"created_at":"2012-03-20T08:48:53Z"},{"updated_at":"2012-03-13T10:01:10Z","name":"something","id":59,"created_at":"2012-03-13T10:01:10Z"}]" id="subscription_preference_tag_tokens1" name="subscription_preference[tag_tokens1]" size="30" type="text" style="display: none; "/>

<input data-disable-with="Saving preference..." id="subscription_preference_submit" name="commit" type="submit" value="Save preference"/>

</form>

<form accept-charset="UTF-8" action="/subscription_preferences/129" class="edit_subscription_preference" id="edit_subscription_preference_129" method="post">
<div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: inline; ">

<label for="subscription_preference_tag_tokens2">Explicit exclude</label>
<ul class="token-input-list-facebook">
<ul class="token-input-list-facebook">
<ul class="token-input-list-facebook">
<ul class="token-input-list-facebook">

<input data-pre="[]" id="subscription_preference_tag_tokens2" name="subscription_preference[tag_tokens2]" size="30" type="text" style="display: none; "/>
<input data-disable-with="Saving preference..." id="subscription_preference_submit" name="commit" type="submit" value="Save preference"/>
</form>

我不知道为什么ir会为每个“subscription_preference_tag_tokensX”创建四个'token-input-list-facebook'。这是问题的图片：

编辑1：

这是我的jQuery代码：

$(function () {
  $('#subscription_preference_tag_tokens1').tokenInput('/tags.json', { 
    crossDomain: false, 
    preventDuplicates: true,
    prePopulate: $('#subscription_preference_tag_tokens1').data('pre'),
    theme: 'facebook',

  });
  $('#subscription_preference_tag_tokens2').tokenInput('/tags.json', { 
    crossDomain: false, 
    preventDuplicates: true,
    prePopulate: $('#subscription_preference_tag_tokens2').data('pre'),
    theme: 'facebook',

  });

});

Answer 1

我正在寻找相同的答案，问题是，所有字段都获得相同的json文件作为答案。因此，文件的每个部分都成为一个标记，用这个部分填充你的字段。

如果您找到了解决方案，请告诉我。但是，您可能需要为每个字段生成不同的jsons，因为每个字段都会查找文件的特定部分。