Question

我已经使用 Rails-casts 第196集在模态弹出窗口中添加了动态添加输入字段。但是当我尝试删除添加的输入字段时，模态弹出窗口消失了。

应用程序助手

def link_to_add_fields(name, f, association)
    new_object = f.object.send(association).klass.new
    id = new_object.object_id
    fields = f.fields_for(association, new_object, child_index: id) do |builder|
      render(association.to_s.singularize + "_fields", f: builder)
    end
    link_to(name, '#', class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")})
  end

查看

<div class="col-md-5">
                  <a href="#" data-toggle="modal" data-target="#buglistmodal">Click to add bugs list</a>
                  <div class="modal fade bannerformmodal" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true" id="buglistmodal">
                    <div class="modal-dialog modal-lg">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h4 class="modal-title" id="myModalLabel">Add Bug list</h4>
                          <a href="#" data-toggle="modal" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
                        </div>
                        <div class="modal-body">
                          <div class="row">
                            <%= f.fields_for :bug_fixes do |builder| %>
                              <%= render 'bug_fix_fields', f: builder %> 
                            <% end %>
                            <%= link_to_add_fields '<i class="fa fa-plus-circle fa-2x"></i>'.html_safe, f, :bug_fixes %>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

渲染文件 - ＆gt; _bug_fix_field.html.erb

<div class="row col-md-11" style="padding-bottom: 10px;">
    <div class="col-md-3">
    <%= f.text_field :bug_id, class: "form-control", placeholder: "Bug ID" %>
  </div>
  <div class="col-md-8">
    <%= f.text_area :summary, class: "form-control", placeholder: "Description" %>
  </div>
  <%= f.hidden_field :_destroy %>
    <%= link_to '<i class="fa fa-minus-circle fa-2x"></i>'.html_safe, "#", class: "remove_fields" %>
</div>

我收录的JQuery

jQuery(function(){
    $('form').on('click', '.remove_fields', function(event) {
      $(this).prev('input[type=hidden]').val('1');
      $(this).closest('fieldset').hide();
      return event.preventDefault();
    });
    return $('form').on('click', '.add_fields', function(event) {
      var regexp, time;
      time = new Date().getTime();
      regexp = new RegExp($(this).data('id'), 'g');
      $(this).before($(this).data('fields').replace(regexp, time));
      return event.preventDefault();
    });
  });

注意：上面的Jquery已添加到视图页面的底部。

Answer 1

提示1：也许你可以使用茧宝石。但我理解酿造自己的解决方案的乐趣。点击处理程序乍一看似乎是正确的。

但是，你正在寻找最近的fieldset来删除，但嵌套的项目没有包含在fieldset中。不知道为什么它最终会删除模态。

最简单的解决方案是将嵌套的错误修复程序包装在特定的类中，然后您可以只搜索要移除的类的最近实例（这就是我们如何在cocoon中解决它）。

Rails动态删除不在模态上工作的文本字段

1 个答案: