javascript - ネストされたフォームの新しいフィールドに jquery を再適用する - Rails 3

Question

私はjqueryが初めてで、レール上でネストされたフォームを使用しています。フォームが非常に大きいので、フォームにアコーディオン プラグインを適用しようとしています。何が起こるかは次のとおりです。

アコーディオン プラグインは、フォームが読み込まれるとうまく機能しますが、新しいフィールドを追加すると、アコーディオンは新しいフィールドで機能しません。「更新」するか、javascript に何かを追加して jquery で新しいフィールドを見つける必要があると思います。

コードは次のとおりです。

意見：

<div id="wrapper"> <!-- wrapper for accordion -->
    <%= f.simple_fields_for :chapters do |builder| %>
        <%= render "chapters_fields", f: builder %>
    <% end %>
    <p>
        <%= link_to_add_fields "Add chapters", f, :chapters, "chapters" %>
    </p>
    <br/>
</div>

部分的な _chapters_fields:

<div class="chapter-fields">
  <div class="accordionButton">
    <h3>Chapter</h3>
  </div>
  <div class="accordionContent">
  <p>
    <%= f.input :reference, input_html: {title: "Links chapters to each other. The first chapter must have reference '1'"} %>
    <%= f.input :content, as: :text, input_html: { rows: 10, style: 'width: 100%' } %>
    <%= f.input :image, input_html: {onchange: "validateFiles(this);"}, data: {max_file_size: 300.kilobytes} %>
    <% if f.object.image.blank? %>
      No current image
    <% else %>
      Current image: <%= f.object.image.url.split("/").last %>
    <% end %>
  </p>
  </div>
</div>
<br/>

アプリケーション.js

$('.accordionButton').click(function() {
      //REMOVE THE ON CLASS FROM ALL BUTTONS
      $('.accordionButton').removeClass('on');
      //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
      $('.accordionContent').slideUp('normal');
      //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
      if($(this).next().is(':hidden') == true) {
        //ADD THE ON CLASS TO THE BUTTON
        $(this).addClass('on');
        //OPEN THE SLIDE
        $(this).next().slideDown('normal');
      }
 });

    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
    //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER

    $('.accordionButton').mouseover(function() {
      $(this).addClass('over');
      //ON MOUSEOUT REMOVE THE OVER CLASS
    }).mouseout(function() {
      $(this).removeClass('over');
    });

    /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
    $('.accordionContent').hide();


function add_fields(link, association, content) {
    var new_id = new Date().getTime();
    var regexp = new RegExp("new_" + association, "g");
    $(link).parent().before(content.replace(regexp, new_id));
}

function remove_fields(link, form) {
    $(link).prev("input[type=hidden]").val("1");
    $(link).closest("."+form+"-fields").hide();
}