Question

我使用Ryan Bates＆＃39;我的rails应用中的nested form，但我也希望为它添加一些自定义的javascript。

我的观点（.slim）：

= f.fields_for :student do |builder|
    = builder.input :uni
    = builder.input :grad
    = builder.input :degree_type
    = builder.input :degree_abbr

    = builder.fields_for :majors do |maj|
        = maj.input :name, label: "Name of major"
        = maj.input :foo1_id, collection: Foo.all, input_html: {id: 'foo_1'}
        = maj.input :foo2_id, collection: [], input_html: {id: 'foo_2'}
        = maj.input :foo3_id, collection: [], input_html: {id: 'foo_3'}
        = maj.link_to_remove "Remove this major ▲"
    = builder.link_to_add "Add another major", :majors

我的javascript：

$("#foo_1").change(function() {
    $.ajax({
        url: '/welcome/update_foo',
        type: 'GET',
        format: 'js',
        dataType: 'script',
        data: {
            foo_1_id: $('#foo_1 option:selected').val()
        }
    });
});
$("#foo_2").change(function() {
    $.ajax({
        url: '/welcome/update_foo',
        type: 'GET',
        format: 'js',
        dataType: 'script',
        data: {
            foo_2_id: $('#foo_2 option:selected').val()
        }
    });
});

这一切都很好用和花花公子。我使用ajax请求动态更新下拉列表（当我从#foo_1中选择一个选项时，#foo_2会填充正确的信息）。这是我的问题：当我点击Add another major时，我不知道如何分配和检索这些新输入＆＃39; IDS。第二个专业下的下拉菜单没有正确填充。

他们也被#foo_1，#foo_2和#foo_3了吗？如果是这样，我如何在我的javascript .change()方法中区分它们？

他的README显示您可以捕获nested:fieldAdded，但我不确定从这里采取的步骤。

Rails 4.1.5
红宝石2.1.2p95

谢谢！

Answer 1

通过nested_form，在表单生成过程中，ID被用来唯一地标识输入。也许您可以采用其他方法并使用CSS选择器。基于此，您可以更改nested：fieldAdded事件上的元素。

$('#trading_address').on 'nested:fieldAdded', (event) ->
  filed = event.field;
  filed.find('select').select2();

在此示例中，当添加字段时，将搜索select元素并将select2应用于该元素。

类似地，您可以添加一个change事件，在该事件中调用某些javascript。像这样：

filed.change(function(){  
 ... do stuff
});

将自定义javascript添加到nested_form（Rails）

1 个答案: