使用Cocoon(嵌套表单)和jQuery可以一起排序

Question

我目前有一个使用Cocoon生成的输入表单,并希望使其创建的输入字段可排序(使用jQuery-ui中的sortable).

嵌套表单的代码是:

<%= f.simple_fields_for :checkout_procedures do |procedure| %>  
  <li><%= render 'checkout_procedure_fields', :f => procedure %></li> 
<% end %>  
<div class="links">
  <%= link_to_add_association 'add step', f, :checkout_procedures %>
</div>

渲染的部分(_checkout_procedure_fields)是:

<div class="checkout_procedure nested-fields">
  <table>
    <tr>
      <td><%= f.input :step %></td>
      <td><%= link_to_remove_association "remove step", f %></td>
    </tr>
  </table>
</div>

我可以通过将现有元素置于a中<div>并使用jQuery 将其设置为可排序来使现有元素可排序:

<div class="sortThese">
   <%= f.simple_fields_for :checkout_procedures do |procedure| %>  
     <li><%= render 'checkout_procedure_fields', :f => procedure %></li> 
   <% end %>  
</div> 
<div class="links">
  <%= link_to_add_association 'add step', f, :checkout_procedures %>
</div>

<script>
 $(document).ready(function() {
   $(".sortThese").sortable();
      });
 </script>

但这样做打破了Cocoon link_to_add_association和link_to_remove_association.的功能.使用<ul>带有<li>也会导致同样的茧故障.我一直在寻找破解一些javascript,将每个输入表单移入和移出可排序的div(这样做似乎使链接再次工作),但显然这是不优雅的.如果有人有任何建议,我真的很感激他们!

Answer 1

如果删除<li>标签，它会很好地排序。在我的项目中尝试过，除了部分的包装之外，我有相同的标记li，并且它有效。