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

Re applying jquery for new fields in nested forms - Rails 3

本文关键字：新应用 应用 jquery Rails 字段 表单 嵌套 新字段      更新时间：2023-09-26

我是jquery的新手，我在rails上使用嵌套表单。表单是如此之大，以至于我正在尝试将手风琴插件应用于表单.以下是发生的情况：

手风琴

插件在加载表单时运行良好，但是，当我添加新字段时，手风琴将无法与新字段一起使用。我相信我必须进行"刷新"，或者在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();
}

您正在设置的jQuery侦听器仅在初始文档加载时侦听DOM的元素（我猜您已经将其包含在$(document).ready(//your code)中）。

要让他们侦听特定容器（或整个文档中）中的新项目，您需要在上一级（或整个文档，如下所示）侦听，如下所示： 

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

这应该可以解决问题。

相关文章：