Повторное применение jquery для новых полей во вложенных формах - Rails 3

Question

Повторное применение jquery для новых полей во вложенных формах - Rails 3

0

Я новичок в 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/>

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

Hugo Tamaki 07 нояб. 2013, в 11:25

Источник

Теги:

javascript

jquery

ruby-on-rails

nested-forms

1 ответ

Ещё вопросы

thomasstephn · Accepted Answer · 2013-11-07T08-10-00.000Z

Слушатели 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();
}

Это должно делать свое дело.