javascript - 通过复选框操纵插入字段并通过Jquery选择-Cocoon Rails

我在访问和使用复选框的值时遇到麻烦，然后为通过Cocoon Gem for Rails动态添加的表单选择字段。我已经阅读了许多SO帖子和Cocoon官方文档，但似乎似乎做对了。

想法是，在通过Cocoon添加表单之后，只有在特定复选框为:checked的情况下才会显示隐藏的字段，其中一个字段为f.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();
        }
    });
});

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

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

我是用错误的方式处理还是我的代码不正确？在此先感谢您提供的所有帮助！

更新资料

当然，一旦我发布了问题，我就知道了。 +中的[id*="+misc_mortgage"]被扔掉了，我没有正确加载cocoonoptions.js。离开这个问题，这样也许将来会对某人有所帮助。

最佳答案

所以我的代码几乎是正确的。一旦我改变
$(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 %>

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

关于javascript - 通过复选框操纵插入字段并通过Jquery选择-Cocoon Rails，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44991407/