通过 Jquery - Cocoon Rails 从复选框和 Select 操作插入的字段

Question

我无法访问和使用复选框的值，然后是通过 Cocoon Gem 为 Rails 动态添加的表单的 select 字段。我已经通读了许多 SO posts 和官方 Cocoon 文档，但我似乎无法理解它。

想法是，在通过 Cocoon 添加表单后，只有当特定复选框为 :checked 时才会显示隐藏字段，其中一个字段为 f.select select该值的更多字段将显示或隐藏。

_mortgage_fields.html.erb

...

<%= f.form_group :misc_mortgage do %>
  <%= f.check_box :misc_mortgage, label: "Miscellaneous Mortgage" %>
<% end %>

<%= f.select :misc_mortgage_context, [["Assignment", "Assignment"], ["Subordination", "Subordination"], ["Modification", "Modification"]],
               { label: "Miscellaneous Mortgage Type" }, wrapper: { class: 'mtgHidden' }%>

<%= f.text_field :reference_mortgage, class: 'form-control', wrapper: { class: 'mtgHidden' } %>

<%= f.text_field :subordinated_mortgage, class: 'form-control', wrapper: { class: 'Subordination' } %>

<%= f.text_field :modification_amount, class: 'form-control', wrapper: { class: 'Modification' } %>

...

顶级表格用<div id="mtgForm">..</div>

包裹

cocoonoptions.js

$(document.ready(function() {


  $('#mtgForm').on('cocoon:after-insert', function(e, misc_checkbox) {

    alert('getting there');

    $(misc_checkbox).find('input[type=checkbox][id*="+misc_mortgage"]').change(function() {

            alert('almost there');

            if ($(this).is(':checked'))
                alert('there!');
                $('.mtgHidden').show();
            else
                $('.mtgHidden').hide();
        });



    $(misc_checkbox).find("select[name*='misc_mortgage_context']").change(function() {
        var mtg = $(this).val();

        if (mtg == "Subordination") {
            $('.Subordination').show();
            $('.Modification').hide();
        }
        else if (mtg == "Modification") {
            $('.Modification').show();
            $('.Subordination').hide();
        }
        else {
            $('.Subordination').hide();
            $('.Modification').hide();
        }
    });
});

wrapper: { ... }字段被CSS设置为display: none，然后通过JS根据上述值显示或隐藏。同样的代码（当然没有 cocoon:after-insert 部分）在静态 HTML 页面上工作，用于添加单个项目，而无需像 Cocoon 那样一次添加多个项目。

我已经根据我在网上找到的不同 post 或网站以多种不同方式尝试了上述代码，但我似乎只能触发第一个测试警报。包括没有 $(...) 包装器的 misc_checkbox.find('...')。

我是不是用错了方法，还是我的代码不正确？在此先感谢您提供的所有帮助！

更新

当然，一旦我 post 我想通了这个问题。 [id*="+misc_mortgage"] 中的 + 被扔掉了，我没有正确加载 cocoonoptions.js。打算留下这个问题，所以也许它会在将来帮助某人。

Answer 1

所以我的代码几乎正确。一旦我改变 $(misc_checkbox).find('input[type=checkbox][id*="+misc_mortgage"]') 到 $(misc_checkbox).find('input[type=checkbox][id*="misc_mortgage"]') 并通过

加载 JS

<% content_for :javascript do %>

  <script type="text/javascript">


  </script>

<% end %>

视图底部的功能，一切正常。

通过 Jquery - Cocoon Rails 从复选框和 Select 操作插入的字段

Manipulating Inserted Fields from Checkbox and Select via Jquery - Cocoon Rails

javascript

jquery

ruby-on-rails

ruby-on-rails-5

cocoon-gem