在cocoon部分（rails）中使用javascript

我的cocoon gem正在正常工作，并在我的应用程序中正确添加\删除部分。我添加了动态下拉列表来过滤cocoon创建的部分中的select标记。第一个下拉列表使用javascript过滤第二个下拉列表，但仅对cocoon创建和添加的第一个部分项起作用。 有没有人能帮我弄清楚，确保cocoon创建的每个部分都能使用这个功能的最佳方法是什么，以及我可以根据需要多次更改第一个下拉列表

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

<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绑定到现有的.div\u add元素，当单击链接\u to\u add\u关联并插入新的分部时，新插入的.div\u add元素不会绑定到单击处理程序

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

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

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

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