sortable 中的列表元素排序后只响应 addClass答案

【问题标题】：List elements in sortable only respond to addClass after sortingsortable 中的列表元素排序后只响应 addClass
【发布时间】：2013-11-08 00:02:39
【问题描述】：

我通过修改一点 Railscast 147 教程在 Rails 4 应用程序中设置了一个可排序的嵌套表单，并且一切正常。在我的项目中，每个li 都包含一个fields_for，其中包含嵌套资源的字段，包括一个复选框。我的问题是我想根据包含li 的复选框的位置来处理复选框信息。另外，如果其中一个输入被选中，这也会影响其他字段。我为此编写了一个 jquery 函数（主要通过addClass 和removeClass），并将对该函数的调用放在我的可排序对象和事件处理程序中。

  process_components = (o) ->
    $components = $(o).find('li')
    // other stuff
    $components.removeClass("parent_component child_component")
    $components.find('input.is_child').each ->
      firstcheck = $(this).prop('checked')
      secondcheck = $(this).closest('li').next().find('input.is_child').prop('checked')
      if firstcheck is true
        $(this).closest('li').addClass('child_component')
      if firstcheck is false and secondcheck is true
        $(this).closest('li').addClass('parent_component')

$('#components-list').sortable
    axis: 'y'
    items: "> li.component"
    update: ->
      $.post($(this).data('update-url'), $(this).sortable('serialize'))
      process_components $(this)

$('#components-list').on 'click', ':checkbox', (event) ->
    process_components '#components-list'

我的问题是，这只有在手动对列表元素进行几次排序后才能正常工作（元素只有在列表中的位置发生变化后才会响应复选框状态）。我在这里和谷歌上环顾四周，但我找不到任何关于为什么会发生这种情况的线索。它可能与 Jquery 和 Jquery UI 在处理addClass 方面的差异有关吗？有想法该怎么解决这个吗？谢谢

【问题讨论】：

很难完全理解是什么问题......在 jsfiddle.net 中创建一个演示，并包含复制的步骤
也许您还需要在页面加载时调用process_components？仍然不清楚是什么问题
@charlietfl 你在这里link 小提琴有效，所以我担心它可能与Rails 如何格式化表单字段有关。我试图在页面加载时调用process_components，但结果是一样的：只有 child_component 字段响应，相邻的字段直到我将它们拖到 sortable 中才响应。

标签： jquery ruby-on-rails jquery-ui jquery-ui-sortable

【解决方案1】：

一天后我发现，实际上fields_for 是罪魁祸首。我不知道为什么会这样，但检查渲染页面中的各种元素，我发现由 Rails 生成的隐藏的 :id 字段不是作为包含所有其他组件字段的 li 的子项放置的。相反，隐藏的 :id 字段最初显示为包含它的 li 的兄弟，因此，process_components 定位到 DOM 中的错误元素。在 sortable 中拖动不同的lis 后，建立了正确的 DOM 结构并且一切正常。因此，解决方案是通过指定f.fields_for(:components, include_id: false) 并在fields_for 字段中显式包含<%= f.hidden_field :id %> 来覆盖Rails 的默认值。这样一来，页面加载完成就可以了。

【讨论】：