在茧部分（rails）中使用javascript答案

【问题标题】：using javascript inside cocoon partial (rails)在茧部分（rails）中使用javascript
【发布时间】：2018-11-09 19:05:30
【问题描述】：

我的 cocoon gem 正在工作并在我的应用程序中正确添加\删除部分。我添加了动态下拉列表来过滤 cocoon 创建的部分中的选择标签。第一个下拉列表使用 javascript 过滤第二个下拉列表，但仅适用于 cocoon 创建和添加的第一个部分（项目）。谁能帮我弄清楚确保这对 cocoon 创建的每个部分都有效的最佳方法是什么，并且我可以根据我想要过滤的次数多次更改第一个下拉列表？

这是cocoon每次添加item时创建的部分代码：

<script type="text/javascript">
    $('.div_add').bind('click', function() {
      var allOptions = $('#selectprod option')
      $('#selectcat').change(function () {
          $('#selectprod option').remove()
          var classN = $('#selectcat option:selected').prop('class');
          var opts = allOptions.filter('.' + classN);
          $.each(opts, function (i, j) {
              $(j).appendTo('#selectprod');
          });
       });

    });
</script>

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 form-font div_add">
  <div class="prodselectbox">
    <div class="floatleft cat">Board Type</div>
    <div class="floatleft catid">
      <select id="selectcat" name="board_type" class="ship_nice_select">
        <option value="" class="rhth">Select Board Type</option>
        <option>all options for first dropdown</option>            
        <option class="Some" id="selectionone">Some</option> 
        <option class="Some2" id="selectionone">Some2</option>       
      </select>
    </div>
  </div>  
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 form-font div_add">
  <div class="floatleft artid">Part Number</div>
  <div class="floatleft selectarticle">
    <select id="selectprod" name="part_num" class="ship_nice_select">
      <option value="" class="rhth23">Select Part Number</option>
      <% @items_some = Item.where(board_type: "Some") %>
      <% @items_some.each do |i| %>
        <option class="selectors Some">
          <%= i.part_num %>
        </option>
      <% end %> 
      <% @items_some2 = Item.where(board_type: "Some2") %>
      <% @items_some2.each do |i| %>
        <option class="selectors Some2">
          <%= i.part_num %>
        </option>
      <% end %>    
    </select>
  </div>
</div>

【问题讨论】：

标签： javascript ruby-on-rails dynamic drop-down-menu apache-cocoon

【解决方案1】：

您的视图代码似乎非常不完整，但从您的描述我想我可以推断出会发生什么：当单击 link_to_add_association 并插入新的部分时，您的 javascript 绑定到现有的 .div_add 元素，那些新插入的 @ 987654324@ 未绑定到点击处理程序。

两个选项：cocoon 允许在插入时附加回调（参见documentation）

但在您的情况下，更好的解决方案是编写您的 javascript 有点不同：

$(document).on('click', '.div_add', function() {
  // your handler here
});

由于此处理程序附加到文档，因此对于动态添加到页面的.div_add-元素，这将正常工作。

【讨论】：