0

我正在使用嵌套模型形式，如rails cast。 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。当我单击单选按钮“视频”时，会在名为 .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()

任何帮助，将不胜感激

4

1 回答 1

1

我猜你只需要使用“实时”版本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属性或sfor上的属性<label>，现实生活中的版本会解决这个问题，但这只是一个演示，我不想弄乱它需要更多的机器来演示on.

于 2013-09-08T02:28:39.740 回答