jQuery не находит добавленный элемент

Question

Я пытаюсь взломать fullcalendar, чтобы отображать несколько событий в строке в моем календаре. Поэтому для этого я хочу перебирать эти строки и реорганизовывать их содержимое. Однако jQuery не может find() этих строк.

<div class="fc-content-skeleton"> 
    <table> 
     <thead> 
      <tr> 
       <td class="fc-day-number fc-mon fc-past" data-date="2016-09-26">26</td> 
       <td class="fc-day-number fc-tue fc-past" data-date="2016-09-27">27</td> 
       <td class="fc-day-number fc-wed fc-past" data-date="2016-09-28">28</td> 
       <td class="fc-day-number fc-thu fc-past" data-date="2016-09-29">29</td> 
       <td class="fc-day-number fc-fri fc-today fc-state-highlight" data-date="2016-09-30">30</td> 
       <td class="fc-day-number fc-sat fc-other-month fc-future" data-date="2016-10-01">1</td> 
       <td class="fc-day-number fc-sun fc-other-month fc-future" data-date="2016-10-02">2</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td rowspan="2"></td> 
       <td class="fc-event-container" rowspan="2"> 
        <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end event-free" data-url=""></a> 
       </td> 
       <td rowspan="2"></td> 
       <td class="fc-event-container"> 
        <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end event-mine" data-url=""></a> 
       </td> 
       <td class="fc-event-container"> 
        <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end event-free" data-url=""></a> 
       </td> 
       <td rowspan="2"></td> 
       <td rowspan="2"></td> 
      </tr> 
      <tr> 
       <td class="fc-event-container"> 
        <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end event-taken" data-url=""></a> 
       </td> 
       <td class="fc-event-container"> 
        <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end event-free" data-url=""></a> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Я смог добраться до table теге под .fc-content-skeleton. Но когда я называю «find (« table »). Children() 'возвращает только thead, но не tbody, что мне нужно. Я делаю это после того, как все события были извлечены и добавлены.

EDIT

Функция вызывается следующим образом:

$(document).on("ready turbolinks:load", function(){ 
     //..... 

     $("#calendar").fullCalendar(calendarOpt); 
     $("#calendar").reorganizeEvents(); 

     //..... 
}): 

Сама функция:

(function($) { 
    $.fn.reorganizeEvents = function(){ 
    if(reorgHandler == false){ 
     $(this).fullCalendar('render'); 
     var $dayContainers = $(this).find(".fc-row .fc-content-skeleton table") 
      .children(); //obtaining children of the table in .fc-skeleton. 
      // Supposed to be <thead> and <tbody> 
      console.log($dayContainers); //successfully finds table 
      $dayContainers.each(function(index){ 
      console.log($(this)); //shows only <thead> as a single child 
      }); 
      reorgHandler = true; 
     } 
     } 
    }(jQuery)); 

Answer 1

Поместите JavaScript в нижней части страницы, перед закрытием </body>

или использовать

$(document).ready(function(){ 
    $(".fc-content-skeleton").find("table").children(); 
}) 

Answer 2

Как @epascarello отметил, что элементы не были оказаны в тот момент, когда я пытался получить к ним доступ. Вызов функции рендеринга явно не устранил проблему. Тем не менее, fullcalendar имеет обратный вызов eventAfterAllRender, который срабатывает после отображения всех событий. Вызов моей функции при этом обратном вызове устранил проблему.

Answer 3

Что об использовании eventAfterRender

вы можете ждать, что элемент визуализируется, а затем выберите его.