Javascript jquerytokeninput&；动态嵌套表单

我正在使用的设置来动态地将字段添加到表单中，但在使其工作时遇到问题

表格：

嵌套表单在函数中的作用如下：

function add_fields(link, association, content) {
    var new_id = new Date().getTime();
    var regexp = new RegExp("new_" + association, "g")
    $(link).parent().before(content.replace(regexp, new_id));
}

function remove_fields(link) {
    $(link).prev("input[type=hidden]").val("1");
    $(link).closest(".fields").hide();
}

这一行在这里：

var new_id = new Date().getTime();

使tokeninput字段动态，这是我从HTML中提取的内容，请注意字段中不断变化的长数字。这是因为上面的一行

<label for="user_user_products_attributes_1313593151076_product_token">Product</label>
<label for="user_user_products_attributes_1313593146876_product_token">Product</label>
<label for="user_user_products_attributes_1313593146180_product_token">Product</label>

---

尝试使用令牌输入进行数据预处理时：

def new
  @user_product = current_user.user_products.build

  # This line below is for TokenInput to work, This allowed me to use @products.map on the form.
  @products = []
end

def edit
  @user_product = UserProduct.find(params[:id])

  # This line below had to find the Product associated with the UserProduct
  @products = [@user_product.product]
end

您可以使用jQuery而不是as来返回插入的元素。它将帮助你触发一些事件。您可以在此事件上有一个侦听器，其中可以有您的令牌输入代码。您还应该使用类而不是id，因为许多元素可以具有相同的类，但没有两个元素具有相同的id

$(content.replace(regexp, new_id)).insertBefore($(link).parent()).trigger("nestedForm:added");

$('div.fields').live("nestedForm:added", function() {
  $(".product_token", $(this)).tokenInput("/products.json", {
    prePopulate: $(".product_token", $(this)).data("pre"),
    tokenLimit: 1
  });
});

---

这只是一个想法，代码没有经过测试。

对于输入，您还知道如何让Tokeninput类选择器工作吗？当我为TokenInput输入以下内容时，它不起作用。您能用当前的更改更新问题吗？我不明白什么不起作用。@rubish，wrbg-我可以请你去拜访一下吗？只是希望你在关于tokeninput的问题上有所贡献。n我不知道这样的请求在软件中是否可以接受解决方案中的第一行将在

add\u fields

函数中被替换。要使类选择器正常工作，您需要将user_product_字段部分更改为assign class，而不是id。您还需要像我在回答中所做的那样对

$（“.product_token”）.data（“pre”）

进行作用域。谢谢，您让它正常工作了！您是如何在嵌套输入中使用data pre的？@negarnil用于编辑/更新模型的，对吗？是的，当我转到编辑时，使用tokeninput的嵌套属性为空。在railscast中，ryan使用“data pre”=>@book.authors.map（&:attributes）.to_json。我不知道如何获取嵌套对象。

<label for="user_user_products_attributes_1313593151076_product_token">Product</label>
<label for="user_user_products_attributes_1313593146876_product_token">Product</label>
<label for="user_user_products_attributes_1313593146180_product_token">Product</label>

 function add_fields(link, association, content) {
    var new_id = new Date().getTime();
    var regexp = new RegExp("new_" + association, "g")
    $(content.replace(regexp, new_id)).insertBefore($(link).parent()).trigger("nestedForm:added");
}

$('div.fields').live("nestedForm:added", function() {
  $("#product_token", $(this)).tokenInput("/products.json", {
    prePopulate: $("#product_token", $(this)).data("pre"),
    tokenLimit: 1
  });
});

def new
  @user_product = current_user.user_products.build

  # This line below is for TokenInput to work, This allowed me to use @products.map on the form.
  @products = []
end

def edit
  @user_product = UserProduct.find(params[:id])

  # This line below had to find the Product associated with the UserProduct
  @products = [@user_product.product]
end

$(content.replace(regexp, new_id)).insertBefore($(link).parent()).trigger("nestedForm:added");

$('div.fields').live("nestedForm:added", function() {
  $(".product_token", $(this)).tokenInput("/products.json", {
    prePopulate: $(".product_token", $(this)).data("pre"),
    tokenLimit: 1
  });
});