0

レールキャストのように、ネストされたモデルフォームを使用しています。 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()

3 つのラジオ ボタン (「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 ボタンをクリックすると、新しく追加されたフィールドに対して上記の動作が機能しなくなり、新しいフォームが動的に作成されることです。[フィールドの追加] ボタンをクリックすると、ラジオ ボタンの新しいセットが表示されますが、3 つのラジオ ボタンのいずれかをクリックすると、関連する div が表示されません (クリックすると、3 つの div すべてが非表示になることに注意してください)。フィールドの追加ボタンの - それらを非表示にしないと、3 つの div すべてが一度に表示されます)。ただし、ページの他のフィールドでは、正しく機能します (追加されたばかりのフィールドでは機能しません)。

以下のように 2 つの動作を組み合わせてみましたが、うまくいきませんでした。

$('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