javascript - 为什么我的代码中的 cocoon 不捕获回调？

Question

我在 ruby​​ make 和 cocoon 中有一个函数嵌套形式。问题是我尝试使用 before-insert 和 after-insert 但它什么也没做。

我的喵:

<div class="row" id="street_enter_itineraries">
          <table>
            <div class="street_enter_itineraries" >
              <%= f.fields_for :street_enter_itineraries do |builder| %>
                <%= render 'street_enter_itinerary_fields', f:builder %>
              <% end %>
            </div>
          </table>
            <div class="row">
              <%= link_to_add_association  "Añadir calle de entrada",f, :street_enter_itineraries, class: 'btn btn-info', data: {association_insertion_node: '.street_enter_itineraries', association_insertion_method: :append}  %>
            </div>
          </div>

我的 JavaScript

 $(document).ready(function() {
    $('#street_enter_itineraries')
        .on('cocoon:before-insert', function() {
            var allIds= document.getElementsByClassName("tipocalleentradaidentificar");
            if(allIds.length > 3){
                event.preventDefault();
            }
        })
        .on('cocoon:after-insert', function() {
            refreshID();
        })
});

我看过这篇文章:Cocoon add association, how to limit number of associations因为这就是我想做的。我也尝试过这个选项，但控制台是空的:

 $(document).on('cocoon:after-insert', '.content form', function(e) {
    console.log('Something');
});

提前致谢。

Answer 1

你的jquery选择器是错误的，你忘记了开头的#来表示搜索id。所以你写了 $('street_enter_itineraries') 并且你应该写

$('#street_enter_itineraries')

[编辑]制作 js Turbolinks 相对容易，要么确保它在 turbolinks:load 上触发，而不是使用文档就绪事件(在您的情况下可能是最简单的)

$(document).on('turbolinks:load', function(e) {
    $('#street_enter_itineraries') ...
})

或者使用正确的选择器在文档上注册 cocoon 处理程序:

$(document).on('cocoon:before-insert', '#street_enter_itineraties', function(e) {
   // do something here
}