Javascript 为嵌套表单中的新字段重新应用jquery-Rails 3

我是jquery新手，我在rails上使用嵌套表单。表单太大了，我正试图在表单上应用一个手风琴插件。发生的情况如下：

accordion插件在加载表单时工作良好，但是，当我添加一个新字段时，accordion将无法与新字段一起工作。我认为我必须进行“刷新”，或者在javascript上添加一些东西，以便jquery找到新字段

代码如下：

视图：

---

您正在设置的jQuery侦听器在初始文档加载时只侦听DOM的元素（我猜您已经将其包含在

$（document.ready（//您的代码）

）中）

要让他们监听特定容器（或整个文档内）中的新项目，您需要监听上面的级别（或整个文档，如下图所示），如下所示：

$(document).on('click', '.accordionButton', 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

$(document).on('mouseover', '.accordionButton', function() {
  $(this).addClass('over');
  //ON MOUSEOUT REMOVE THE OVER CLASS
});
$(document).on('mouseout', '.accordionButton', 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();
}

这应该能奏效

<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/>

$('.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();
}

$(document).on('click', '.accordionButton', 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

$(document).on('mouseover', '.accordionButton', function() {
  $(this).addClass('over');
  //ON MOUSEOUT REMOVE THE OVER CLASS
});
$(document).on('mouseout', '.accordionButton', 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();
}