Cocoon gem，如何在呈现的关联上调用插入后回调

Question

我正在使用 Cocoon gem 构建一个嵌套表单，其中 field_for 包含另一个 field_for。层次结构如下所示：

字母表
- 卡片field_for
  - 按钮field_for

每个卡片条目都是使用 link_to_add_association link 添加的。我使用插入后回调允许用户单击创建的卡片以显示包含按钮字段的弹出窗口（用于 UX 目的）。

我的插入后回调示例：

$('#carousel-stage-ul')
      .on('cocoon:after-insert', function(e, insertedItem) {

        insertedItem.find('#add-card-button, .new_button_card').click(function() {
          $('#black-background')[0].style.display = "block";
          insertedItem.find('.add-button-card-modal').css('display', 'block');
        });

        insertedItem.find('#delete_new_card_button').click(function() {
          $('#black-background')[0].style.display = "none";
          insertedItem.find('.add-button-card-modal').css("display", "none");

          $firstIn = insertedItem.find('.add-button-card-modal input[type=text]').eq(0);
          $secondIn = insertedItem.find('.add-button-card-modal input[type=text]').eq(1);

          $firstIn.val("");
          $secondIn.val("");

          $buttonForm = $.parseHTML('<div id="add-card-button" class="add-button">+ Add Button</div>')
          insertedItem.find('#new_card_button').replaceWith($buttonForm[0]);

          insertedItem.find('#add-card-button, .new_button_card').click(function() {
            $('#black-background')[0].style.display = "block";
            insertedItem.find('.add-button-card-modal').css('display', 'block');
          });
        });
            })
      .on('cocoon:after-remove', function(e, insertedItem) {
        ...

_card_fields.html.erb 部分渲染按钮：

<% f.object.buttons.build %>
  <%= f.fields_for :buttons do |button_card_fields| %>
      <%= render 'button_fields', f: button_card_fields %>
  <% end %>

_button_fields.html.erb部分：

<div class="add-button-card-modal">
  <h4>Add New Button</h4>
  <label>Button Text</label>
  <%= f.text_field :button_text, :maxlength => 20, placeholder: "Enter the text to display on the button..." %>
  <br><br>
  <label>Button URL</label>
  <%= f.text_field :button_url, placeholder: "Paste URL..." %>
  <div class="nav-popups-buttons">
    <button type="button" id="validate_new_card_button" class="small-cta2">Add Button</button>
    <p class="remove-link" id="delete_new_card_button">Remove Button</p>
  </div>
</div>

这是为卡片轮播内的一张卡片呈现的 HTML 以更好地理解我的插入后回调：

<div class="connected-carousels" style="display: block;">
                  <div class="stage">
                      <div class="carousel carousel-stage" data-jcarousel="true">
                          <ul id="carousel-stage-ul" style="left: 0px; top: 0px;">


                          <li class="carousel-slide">
  <div id="card-messenger">
    <div class="DIV_1b">
      <div class="DIV_2b">
        <div class="DIV_3">
          <a class="A_4"></a>
          <div class="DIV_5" style="">
          </div>
        </div>
        <div class="DIV_6">
          <div class="DIV_7">
            <div class="DIV_8">
              <div class="DIV_9">
                <div class="DIV_10">
                </div>
                <div class="DIV_11">
                  <input maxlength="80" size="0" placeholder="Enter title..." type="text" name="letter[cards_attributes][1509602161650][title]" id="letter_cards_attributes_1509602161650_title">
                </div>
              </div>
              <div class="DIV_12">
                <div class="DIV_14">
                  <input maxlength="80" size="0" placeholder="Enter subtitle..." type="text" name="letter[cards_attributes][1509602161650][subtitle]" id="letter_cards_attributes_1509602161650_subtitle">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="add-card-button" class="add-button" style="width: 308.203px;">+ Add Button</div>
      <div id="DIV_19" class="card-share-button" style="display:none;">
        <a id="A_20">Share</a>
      </div>
      <div id="DIV_19" class="input-card-share-button">
        <div id="add-share-card-button" class="add-button" style="padding: 0!important;">+ Add Share</div>
      </div>
      <input value="false" id="hidden-share-field" type="hidden" name="letter[cards_attributes][1509602161650][button_share]">
    </div>
  </div>

    <div class="add-button-card-modal">
      <h4>Add New Button</h4>
      <label>Button Text</label>
      <input maxlength="20" placeholder="Enter the text to display on the button..." size="20" type="text" name="letter[cards_attributes][1509602161650][buttons_attributes][0][button_text]" id="letter_cards_attributes_1509602161650_buttons_attributes_0_button_text">
      <br><br>
      <label>Button URL</label>
      <input placeholder="Paste URL..." type="text" name="letter[cards_attributes][1509602161650][buttons_attributes][0][button_url]" id="letter_cards_attributes_1509602161650_buttons_attributes_0_button_url">
      <div class="nav-popups-buttons">
        <button type="button" id="validate_new_card_button" class="small-cta2">Add Button</button>
        <p class="remove-link" id="delete_new_card_button">Remove Button</p>
      </div>
    </div>
  <div class="modal-image">
    <div id="display_image_upload">
      <label>Upload Image</label>
      <input id="image-input" class="inputBox_upload_image" type="file" name="letter[cards_attributes][1509602161650][image_url]"><div class="progress"><div class="bar"></div></div>
    </div>
    <label id="or">OR</label>
    <div id="display_image_url">
      <label>Paste Image Url</label>
      <input id="image-input" class="inputBox_image" type="text" name="letter[cards_attributes][1509602161650][remote_image_url]">
    </div>
    <div class="nav-popups-buttons">
      <button type="button" id="validate_image" class="small-cta2">Add Image</button>
      <p class="remove-link" id="delete_new_card_image">Remove Image</p>
    </div>
  </div>
  <div>
    <input type="hidden" name="letter[cards_attributes][1509602161650][_destroy]" id="letter_cards_attributes_1509602161650__destroy" value="false"><a class="remove-link remove_fields dynamic" data-wrapper-class="carousel-slide" href="#">Remove Card</a>
  </div>
</li></ul>
                        </div>
                        <a href="#" class="prev prev-stage inactive" data-jcarouselcontrol="true"><span>‹</span></a>
                        <a href="#" class="next next-stage inactive" data-jcarouselcontrol="true"><span>›</span></a>
                    </div>
              <div class="navigation">
                  <a href="#" class="prev prev-navigation inactive" data-jcarouselcontrol="true">‹</a>
                  <a href="#" class="next next-navigation inactive" data-jcarouselcontrol="true">›</a>
                  <div class="carousel carousel-navigation" data-jcarousel="true">
                    <ul id="carousel-navigation-ul" style="left: 0px; top: 0px;"><li data-jcarouselcontrol="true" class="active"><img alt="botletter" class="carousel-ico" src="/assets/icon-cards-0178dc5a1fb2811909dcd1d1fcef121baa165e46d49973dff5fdea12090631fa.png"></li></ul>
                  </div>
              </div>
              <div>
                <a id="add-card-button-bis" data-association-insertion-node="#carousel-stage-ul" data-association-insertion-method="append" class="add_fields" data-association="card" data-associations="cards" data-association-insertion-template="<li class=&quot;carousel-slide&quot;>
  <div id=&quot;card-messenger&quot;>
    <div class=&quot;DIV_1b&quot;>
      <div class=&quot;DIV_2b&quot;>
        <div class=&quot;DIV_3&quot;>
          <a class=&quot;A_4&quot;></a>
          <div class=&quot;DIV_5&quot; style=&quot;&quot;>
          </div>
        </div>
        <div class=&quot;DIV_6&quot;>
          <div class=&quot;DIV_7&quot;>
            <div class=&quot;DIV_8&quot;>
              <div class=&quot;DIV_9&quot;>
                <div class=&quot;DIV_10&quot;>
                </div>
                <div class=&quot;DIV_11&quot;>
                  <input maxlength=&quot;80&quot; size=&quot;0&quot; placeholder=&quot;Enter title...&quot; type=&quot;text&quot; name=&quot;letter[cards_attributes][new_cards][title]&quot; id=&quot;letter_cards_attributes_new_cards_title&quot; />
                </div>
              </div>
              <div class=&quot;DIV_12&quot;>
                <div class=&quot;DIV_14&quot;>
                  <input maxlength=&quot;80&quot; size=&quot;0&quot; placeholder=&quot;Enter subtitle...&quot; type=&quot;text&quot; name=&quot;letter[cards_attributes][new_cards][subtitle]&quot; id=&quot;letter_cards_attributes_new_cards_subtitle&quot; />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id=&quot;add-card-button&quot; class=&quot;add-button&quot; style=&quot;width: 308.203px;&quot;>+ Add Button</div>
      <div id=&quot;DIV_19&quot; class=&quot;card-share-button&quot; style=&quot;display:none;&quot;>
        <a id=&quot;A_20&quot;>Share</a>
      </div>
      <div id=&quot;DIV_19&quot; class=&quot;input-card-share-button&quot;>
        <div id=&quot;add-share-card-button&quot; class=&quot;add-button&quot; style=&quot;padding: 0!important;&quot;>+ Add Share</div>
      </div>
      <input value=&quot;false&quot; id=&quot;hidden-share-field&quot; type=&quot;hidden&quot; name=&quot;letter[cards_attributes][new_cards][button_share]&quot; />
    </div>
  </div>

    <div class=&quot;add-button-card-modal&quot;>
      <h4>Add New Button</h4>
      <label>Button Text</label>
      <input maxlength=&quot;20&quot; placeholder=&quot;Enter the text to display on the button...&quot; size=&quot;20&quot; type=&quot;text&quot; name=&quot;letter[cards_attributes][new_cards][buttons_attributes][0][button_text]&quot; id=&quot;letter_cards_attributes_new_cards_buttons_attributes_0_button_text&quot; />
      <br><br>
      <label>Button URL</label>
      <input placeholder=&quot;Paste URL...&quot; type=&quot;text&quot; name=&quot;letter[cards_attributes][new_cards][buttons_attributes][0][button_url]&quot; id=&quot;letter_cards_attributes_new_cards_buttons_attributes_0_button_url&quot; />
      <div class=&quot;nav-popups-buttons&quot;>
        <button type=&quot;button&quot; id=&quot;validate_new_card_button&quot; class=&quot;small-cta2&quot;>Add Button</button>
        <p class=&quot;remove-link&quot; id=&quot;delete_new_card_button&quot;>Remove Button</p>
      </div>
    </div>
  <div class=&quot;modal-image&quot;>
    <div id=&quot;display_image_upload&quot;>
      <label>Upload Image</label>
      <input id=&quot;image-input&quot; class=&quot;inputBox_upload_image&quot; type=&quot;file&quot; name=&quot;letter[cards_attributes][new_cards][image_url]&quot; />
    </div>
    <label id=&quot;or&quot;>OR</label>
    <div id=&quot;display_image_url&quot;>
      <label>Paste Image Url</label>
      <input id=&quot;image-input&quot; class=&quot;inputBox_image&quot; type=&quot;text&quot; name=&quot;letter[cards_attributes][new_cards][remote_image_url]&quot; />
    </div>
    <div class=&quot;nav-popups-buttons&quot;>
      <button type=&quot;button&quot; id=&quot;validate_image&quot; class=&quot;small-cta2&quot;>Add Image</button>
      <p class=&quot;remove-link&quot; id=&quot;delete_new_card_image&quot;>Remove Image</p>
    </div>
  </div>
  <div>
    <input type=&quot;hidden&quot; name=&quot;letter[cards_attributes][new_cards][_destroy]&quot; id=&quot;letter_cards_attributes_new_cards__destroy&quot; value=&quot;false&quot; /><a class=&quot;remove-link remove_fields dynamic&quot; data-wrapper-class=&quot;carousel-slide&quot; href=&quot;#&quot;>Remove Card</a>
  </div>
</li>
" href="#" style="display: block;">+ Add Card</a>
              </div>
            </div>

它看起来像这样：

除创建操作引发错误或加载编辑视图外，一切正常。在这两种情况下，已创建的卡片会被渲染，但不会调用插入后的回调。因此，我无法显示我的按钮弹出窗口...

有什么方法可以在编辑视图/错误视图中调用呈现关联的插入后回调吗？

Answer 1

您真的不应该像这样使用 jquery 来修复编辑代码...这是一种症状，而不是问题...如果关系和 .build 已设置正确的编辑将正常工作并自动加载所有内容 - 因为 rails 所做的是生成表单的 hmtl。

在您实际尝试使用 jquery 技巧修复您的代码之前 - 我建议您构建一个没有弹出窗口的页面...在那里它只会吐出一团乱麻。如果嵌套模型适用于您当前的关系，那么就着手实现一系列复杂的弹出窗口。如果它不起作用 - 问题是您在模型中的关系或您的控制器使用 .build

的方式

也就是说，您正在寻找的答案可以在 jquery 中采用两种形式：

常规 - 您使用 $( document ).ready() 来检测它何时全部设置为触发包含对 cocoon.js 的 after-insert 回调的调用的函数。
特定 - 由于您可能知道名称或包含按钮 field_for 的 css 元素，因此您首先创建一个选择器以在 css 之后field_for ...在你的情况下可能是 connected-carousels。您这样做是为了 jquery 不会在您的 dom 周围徘徊并意外更改其他部分。然后使用 jquery .on() 将按钮所属类型的所有 dom 元素分配给触发的触发器。
- 如何加载部分 w/jquery -
- 更多关于使用 .on() - Passing data to a bootstrap modal
- 你在这个问题上选择的路径意味着你可能需要再做一次破解 - Event binding on dynamically created elements?

Answer 2

如果我理解正确，您希望 after-insert 回调中的内容也被服务器呈现 html。这在某种意义上很奇怪，因为恕我直言，这实际上是我首先要做的:)

因此，与其附加点击事件，不如始终（动态地）处理它们。请注意，id-元素在一个页面中只允许出现一次（正确的 html，否则会导致很多错误），所以我用类替换了所有这些元素，因为它们好像在重复

所以做一些像

$(document).on('click', '.add-card-button, .new-button-card'), function() {
  $('#black-background')[0].style.display = "block";
  $(this).nearest('.add-button-card-modal').css('display', 'block');
})

有人可能想知道为什么你不像普通人那样使用普通模式库:P

第二个点击处理程序虽然有点复杂，但实际上可以用相同的方式解决，因此不再需要 after-insert 处理程序。

所以像

$(document).on('click', '.delete-card-button', function() {
  ...
})

Cocoon gem，如何在呈现的关联上调用插入后回调

Cocoon gem, how to call the after-insert callback on rendered association

jquery

ruby-on-rails

cocoon-gem