0

我是 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();
}
4

1 回答 1

0

您正在设置的 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();
}

这应该够了吧。

于 2013-11-07T09:49:42.460 回答