Javascript 通过Jquery-Cocoon Rails操作复选框中的插入字段并选择

我很难访问和使用复选框的值，然后为通过Cocoon Gem for Rails动态添加的表单选择字段。我已经阅读了很多帖子和官方的Cocoon文档，但我似乎无法正确理解

其思想是，在通过Cocoon添加表单后，只有在特定复选框被选中时才会显示隐藏字段，其中一个字段是

f.select

，选择该值后，更多字段将显示或隐藏

\u mortgage\u 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' } %>

...

$(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_复选框。在不使用
$（…）
包装的情况下查找（“…”）

我是走错了路还是我的代码不正确？提前感谢您的帮助

更新

当然，我一贴出这个问题就明白了。

[id*=“+misc_mortgage”]

中的

+

正在将其丢弃，我没有正确加载

cococoupoptions.js

。我将把这个问题留待以后讨论，也许这会对将来的人有所帮助

所以我的代码几乎是正确的。一旦我改变了

$（杂项复选框）.find（'input[type=checkbox][id*=“+杂项抵押“]）

到

$（杂项复选框）。查找（'input[type=checkbox][id*=“杂项抵押”]”）

，并通过

<% content_for :javascript do %>

  <script type="text/javascript">


  </script>

<% end %>

函数在视图底部，一切正常。

因此我的代码几乎正确。一旦我改变了

$（杂项复选框）.find（'input[type=checkbox][id*=“+杂项抵押“]）

到

$（杂项复选框）。查找（'input[type=checkbox][id*=“杂项抵押”]”）

，并通过

<% content_for :javascript do %>

  <script type="text/javascript">


  </script>

<% end %>

---

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

很好，您找到了答案。如果您在需要时添加您的更新作为未来开发人员的答案，或者如果您希望我可以添加为答案并引用您并接受为答案，这将是非常棒的。许多开发人员不会阅读没有答案的问题，即使答案在问题本身之内：）很好，你找到了答案。如果您在需要时添加您的更新作为未来开发人员的答案，或者如果您希望我可以添加为答案并引用您并接受为答案，这将是非常棒的。许多开发人员不会阅读没有答案的问题，即使答案在问题本身之内：）