為什么我的代碼中的繭不能捕獲回調？

Question

我有功能性的嵌套形式的紅寶石色和繭形。 問題是我試圖使用插入前和插入后，但它什么也不做。

我的想法：

<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，如何限制關聯數量，因為這是我想要做的。 我也嘗試過此選項，並且控制台為空：

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

提前致謝。

Answer 1

您的jquery選擇器錯誤，您在開始時忘記了#來表示正在搜索ID。 所以你寫了$('street_enter_itineraries')然后你應該寫

$('#street_enter_itineraries')

[編輯]使js加速鏈接相對容易，要么確保在turbolinks:load觸發它，要么使用document ready事件（在您的情況下可能是最簡單的）

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

或使用正確的選擇器在文檔上注冊繭處理程序：

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