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이 아닙니다. 나는 모든 사건을 가져오고 붙인 후에 그것을하고있다.

편집 함수가 호출되는

은 다음과 같습니다

$(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

이의 폐쇄하기 전에, 페이지 하단에 자바 스크립트를 넣어 the </body>

또는 사용

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

Answer 2

@epascarello가 지적했듯이 요소는 내가 액세스하려고 할 때 렌더링되지 않았습니다. 렌더링 함수를 명시 적으로 호출해도 문제가 해결되지 않았습니다. 그러나 fullcalendar에는 모든 이벤트가 렌더링 된 후에 발생하는 eventAfterAllRender 콜백이 있습니다. 이 콜백에서 내 함수를 호출하면 문제가 해결되었습니다.

Answer 3

당신이 요소가 렌더링되는 것을 기다렸다가 다음을 선택할 수 있습니다 eventAfterRender

사용에 대한.