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

#javascript #jquery #fullcalendar

#javascript #jquery #полный календарь

Вопрос:

Я пытаюсь взломать 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 тегу under .fc-content-skeleton . Но когда я вызываю ‘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));

1. И где вы вызываете этот код JavaScript? Мой хрустальный шар говорит, что вы пытаетесь получить доступ к элементам до их существования.

2. @epascarello Это, или это может работать со значением переменной до того, как они существовали. Зависит от того, когда find()... записывается.

3. @epascarello Я вызываю его $("#calendar") после создания экземпляра fullcalendar в document.ready функции.

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

5. fullCalendar('render') перед вызовом функции вызывается @epascarello. Не сработало. Обновите сообщение, чтобы показать, как я его называю.

Ответ №1:

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

или используйте

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

Ответ №2:

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

Ответ №3:

Как насчет использования eventAfterRender

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