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> 

私は.fc-content-skeleton下tableタグを取得することができています。しかし、私が '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を置きますthe </body>

または使用

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

Answer 2

@epascarelloが指摘したように、要素はアクセスしようとしていた瞬間にレンダリングされませんでした。レンダリング関数を明示的に呼び出しても問題は解決されませんでした。ただし、fullcalendarにはすべてのイベントがレンダリングされた後に起動するeventAfterAllRenderコールバックがあります。このコールバックで自分の関数を呼び出すと、問題が解決されました。

Answer 3

あなたは要素がレンダリングされることを待ってから、それを選択することができますeventAfterRender

の使用に関する。