“嵌套模型表单”可以正确添加新字段，但 coffeescript 行为不会影响页面上现有字段等新字段

'Nested model form' adds new fields properly, but coffeescript behavior does not impact new fields like existing fields on page

本文关键字：字段 新字段 影响 coffeescript 添加 表单 嵌套 模型      更新时间：2023-09-26

我正在使用嵌套模型形式，就像在轨道铸造中一样。 http://railscasts.com/episodes/196-nested-model-form-revised - 这是add_fields咖啡脚本：

  $('form').on 'click', '.add_fields', (event) ->
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'), 'g')
    $(this).before($(this).data('fields').replace(regexp, time))
    $(".excelCreator, .videoCreator, .mcCreator").hide()
    event.preventDefault()

我有一组三个单选按钮（"excel"+"视频"+"多项选择"）和一个与每个按钮关联的隐藏div。 当我单击单选按钮"video"时，一个名为.videoCreator的div中弹出了一些表单。 "excel"和"multiple_choice"的行为相同。 

$(".excelCreator, .videoCreator, .mcCreator").hide()
  $(".stepRadio").change ->
    $(".excelCreator, .videoCreator, .mcCreator").hide()
    $container = $(@).closest('.stepCreator')
    $container.find(".excelCreator, .videoCreator, .mcCreator").hide()
    if @value is "video"
      $container.find(".videoCreator").show()
    else if @value is "excel"
      $container.find(".excelCreator").show()
    else if @value is "multiple_choice"
      $container.find(".mcCreator").show()

此处充分说明了该行为：http://jsfiddle.net/ambiguous/2XAP2/

我的问题是，当我单击.add_fields按钮时，上述行为不再适用于新添加的字段，并且会动态创建新表单。 我单击添加字段按钮 - 弹出一组新的单选按钮，但是，当我单击三个单选按钮中的任何一个时，它不会显示关联的div（请记住，我在单击添加字段按钮时隐藏了所有三个div - 如果我不隐藏它们，那么所有三个div 都会立即出现）。 但是，在页面上的任何其他字段上，它都可以正常工作（只是不在刚刚添加的字段上）。

我尝试将这两种行为组合如下，但没有奏效： 

$('form').on 'click', '.add_fields', (event) ->
        time = new Date().getTime()
        regexp = new RegExp($(this).data('id'), 'g')
        $(this).before($(this).data('fields').replace(regexp, time))
      $(".excelCreator, .videoCreator, .mcCreator").hide()
      $(".stepRadio").change ->
        $(".excelCreator, .videoCreator, .mcCreator").hide()
        $container = $(@).closest('.stepCreator')
        $container.find(".excelCreator, .videoCreator, .mcCreator").hide()
        if @value is "video"
          $container.find(".videoCreator").show()
        else if @value is "excel"
          $container.find(".excelCreator").show()
        else if @value is "multiple_choice"
          $container.find(".mcCreator").show()
        event.preventDefault()

任何帮助将不胜感激

我猜你只需要使用on的"实时"版本：

委托事件的优点是，它们可以处理以后添加到文档中的后代元素中的事件。通过选取在附加委托事件处理程序时保证存在的元素，可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他 HTML 之前，文档元素在文档的头部可用，因此可以安全地将事件附加到其中，而无需等待文档准备就绪。

而不是直接绑定到change.像这样：

$(document).on 'change', '.stepRadio', ->
  # Same stuff you have in your .change callback

而不是您当前的：

$(".stepRadio").change ->
  #...

这种形式的on监视document上的事件，更改事件（包括来自新添加的元素的事件）将冒泡到document $(document).on('change', '.stepRadio', ...)将看到它们的位置。

演示：http://jsfiddle.net/ambiguous/Xk5ZC/

打 添加更多 按钮添加另一个部分，您将看到所有单选按钮继续工作。请注意，演示没有正确修补单选按钮id属性或<label>上的for属性，现实生活中的版本会解决这个问题，但这只是一个演示，我不想把它弄乱更多的机器来演示on的用法。

相关文章：